/* ============================================================ */
/* Homepage top section (hero)                                  */
/* Left column: headline, intro and buttons.                    */
/* Right column: "Upcoming sessions" card, built from two       */
/*   blocks: a content block with class fb-hero-next-top, then  */
/*   the Upcoming Events gadget with class                      */
/*   fb-hero-next-bottom.                                       */
/* ============================================================ */

.fb-hero-depts { font-family: Raleway, sans-serif; font-size: 13px; font-weight: bold; letter-spacing: 0.12em; text-transform: uppercase; color: #F5D9EC; margin: 0 0 20px 0 !important; text-align: left; }

.fb-hero-depts span { color: #F08BC9; margin: 0 4px; }

.fb-hero-title { font-family: Raleway, sans-serif; font-size: 46px !important; line-height: 1.08 !important; font-weight: 800 !important; color: #FFFFFF !important; text-align: left !important; text-transform: none !important; margin: 0 0 24px 0 !important; }

.fb-hero-title em { font-style: normal; color: #F08BC9; }

.fb-hero-sub { font-family: Raleway, sans-serif; font-size: 18px; line-height: 1.6; color: #E6DFF3; text-align: left; max-width: 560px; margin: 0 0 clamp(32px, 4vw, 44px) 0 !important; }

.fb-hero-ctas { text-align: left; margin: 0 !important; }

/* Minimum space under the buttons on wider screens, so there is always a
   good gap above the Inflation Calculator / news row, even when the
   sessions card is short. When the card is tall, the card sets the gap. */
@media (min-width: 768px) {
  .fb-hero-ctas { margin-bottom: clamp(40px, 6vw, 90px) !important; }
}

.fb-hero-btn { display: inline-block; font-family: Raleway, sans-serif; font-size: 16px; font-weight: bold; padding: 14px 28px; border-radius: 6px; margin: 0 10px 10px 0; text-decoration: none !important; transition: background-color 0.15s ease, border-color 0.15s ease; }

.fb-hero-btn-pink { background-color: #C2318C; color: #FFFFFF !important; border: 1.5px solid #C2318C; }

.fb-hero-btn-pink:hover { background-color: #A8267A; border-color: #A8267A; }

.fb-hero-btn-ghost { background-color: transparent; color: #FFFFFF !important; border: 1.5px solid rgba(255, 255, 255, 0.7); }

.fb-hero-btn-ghost:hover { border-color: #FFFFFF; background-color: rgba(255, 255, 255, 0.1); }

/* Next session card: top half */

.fb-hero-next-top { background-color: rgba(27, 15, 69, 0.6); border: 1px solid rgba(255, 255, 255, 0.25); border-bottom: none; border-radius: 12px 12px 0 0; padding: 18px 20px 0 20px; margin-bottom: 0 !important; }

.fb-hero-next-label { font-family: Raleway, sans-serif; margin: 0 !important; text-align: left; }

.fb-hero-next-label span { display: inline-block; font-size: 11px; font-weight: bold; letter-spacing: 0.1em; text-transform: uppercase; background-color: #C2318C; color: #FFFFFF; padding: 4px 10px; border-radius: 999px; }

.fb-hero-next-label a { float: right; font-size: 13px; font-weight: bold; color: #F5D9EC !important; text-decoration: underline; margin-top: 2px; }

/* Next session card: bottom half (the Upcoming Events gadget) */

.fb-hero-next-bottom { background-color: rgba(27, 15, 69, 0.6); border: 1px solid rgba(255, 255, 255, 0.25); border-top: none; border-radius: 0 0 12px 12px; padding: 14px 20px 20px 20px; margin-top: 0 !important; text-align: left !important; }

.fb-hero-next-bottom .gadgetStyleBody { padding: 0 !important; }

.fb-hero-next-bottom ul { list-style: none; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; }

.fb-hero-next-bottom li { display: flex; flex-direction: column; margin: 0 !important; padding: 0 !important; background: none !important; }

/* Shows every event the gadget loads (set how many in the gadget's own
   settings; 2 is plenty on a phone), with a thin divider between them */
.fb-hero-next-bottom li + li { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 14px !important; margin-top: 14px !important; }

.fb-hero-next-bottom .date { order: -1; font-family: Raleway, sans-serif; font-size: 13px; font-weight: bold; letter-spacing: 0.04em; text-transform: uppercase; color: #F5D9EC; margin: 0 0 8px 0; }

.fb-hero-next-bottom .title { font-family: Raleway, sans-serif; font-size: 18px; line-height: 1.35; font-weight: bold; margin: 0 0 10px 0; }

.fb-hero-next-bottom .title a { color: #FFFFFF !important; text-decoration: none; }

.fb-hero-next-bottom .title a:hover { color: #F08BC9 !important; }

.fb-hero-next-bottom .location { font-family: Raleway, sans-serif; font-size: 14px; color: #D9D1EC; }

/* Phones */

@media screen and (max-width: 700px) {
  .fb-hero-title { font-size: 34px !important; }
  .fb-hero-sub { font-size: 16px; }
  .fb-hero-btn { display: block; text-align: center; margin: 0 0 10px 0; }
}

/* ============================================================ */
/* Homepage layout tweaks                                       */
/* ============================================================ */

/* Filmbase logo, top left (the logo + menu gadget in the site header, on
   every page): scales with screen width, between 140px and 240px wide.
   This block ID is the same on the clone and live, so it moves over as is. */
#id_cthbAbt img {
  width: clamp(140px, 45vw, 240px) !important;
  height: auto !important;
}

/* Homepage hero row: more breathing room on big screens, tighter on phones.
   Give the hero LAYOUT BLOCK the CSS class: fb-home-hero-row */
.fb-home-hero-row {
  margin-top: clamp(16px, calc(3vw + 2vh), 110px) !important;
}

/* Homepage row under the hero (Inflation Calculator banner and news).
   Give that LAYOUT BLOCK the CSS class: fb-home-news-row */
.fb-home-news-row {
  margin-top: clamp(12px, calc(1vw + 1vh), 40px) !important;
  margin-bottom: clamp(8px, calc(3vw + 2vh), 110px) !important;
}

/* Phones and small tablets: more space between the "Find crew" button and
   the Next session card (the card's top block already has its own class). */
@media (max-width: 767px) {
  .fb-hero-next-top { margin-top: 32px !important; }
}