/* ============================================================
   TRIBECA LISBOA — Responsive homepage
   Faithful adaptation of the approved 402px mobile design to
   tablet / desktop / large desktop. Same tokens, components,
   hierarchy and spacing principles — only reflow + scale.
   Breakpoints:  mobile <768 · tablet ≥768 · desktop ≥1024 · large ≥1440
   ============================================================ */

*{ box-sizing:border-box; }
html,body{ margin:0; background:#000; color:#fff; font-family:var(--font-text); -webkit-font-smoothing:antialiased; }
img{ display:block; }
button{ -webkit-tap-highlight-color:transparent; }
::-webkit-scrollbar{ display:none; }
a{ color:inherit; }

/* layout tokens — gutter + content cap grow with the canvas */
:root{ --gut:24px; --maxw:1500px; --hdr-h:82px; --band-y:64px; }
@media (min-width:768px){  :root{ --gut:48px; --band-y:80px; } }
@media (min-width:1024px){ :root{ --gut:64px; --band-y:104px; } }
@media (min-width:1440px){ :root{ --gut:80px; --band-y:128px; } }

.r-wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut); }
.r-band{ padding-top:var(--band-y); padding-bottom:var(--band-y); }
.r-band--black{ background:#000; }
.r-band--indigo{ background:var(--indigo); }
.r-band--white{ background:#fff; }

/* big editorial section headline (Druk) */
.r-h{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; line-height:.86;
  font-size:clamp(72px,8vw,118px); margin:0; }
.r-reveal{ } /* hook for Reveal wrappers that also carry layout classes */

/* ============================ HEADER ============================ */
.r-hdr{ position:sticky; top:0; z-index:50; background:#000; }
.r-hdr-inner{ position:relative; height:var(--hdr-h); display:flex; align-items:center; justify-content:center; }
.r-hdr-burger{ position:absolute; left:var(--gut); top:50%; transform:translateY(-50%); cursor:pointer; }
.r-hdr-logo img{ width:110px; height:auto; }
.r-hdr-sic{ position:absolute; right:0; top:0; width:76px; height:82px; }

/* inline desktop nav + actions — hidden until ≥1024 */
.r-hdr-nav{ display:none; }
.r-hdr-actions{ display:none; }
.r-hdr-ig{ color:#fff; display:flex; align-items:center; transition:color .15s; }
.r-hdr-ig:hover{ color:var(--pink); }

/* language switcher (shared header + drawer) */
.r-lang{ display:flex; align-items:center; gap:6px; }
.r-lang button{ background:none; border:none; padding:0; cursor:pointer;
  font-family:var(--font-text); font-weight:700; font-size:13px; letter-spacing:.02em;
  color:rgba(255,255,255,.55); transition:color .15s; }
.r-lang button.active{ color:#fff; }
.r-lang button:hover{ color:var(--pink); }
.r-lang-sep{ color:rgba(255,255,255,.4); font-size:12px; }

@media (min-width:1200px){
  .r-hdr-logo img{ width:124px; }
  /* logo left · menu center · actions right (SIC banner stays in the corner) */
  .r-hdr-burger{ display:none; }
  .r-hdr-inner{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:24px;
    padding:0 var(--gut); padding-right:calc(76px + 28px); }
  .r-hdr-logo{ grid-column:1; justify-self:start; }
  .r-hdr-nav{ grid-column:2; justify-self:center; display:flex; align-items:center; gap:22px; }
  .r-hdr-nav > a{ font-family:var(--font-text); font-weight:700; font-size:13px; text-transform:uppercase;
    letter-spacing:.02em; color:#fff; text-decoration:none; white-space:nowrap; transition:color .15s; }
  .r-hdr-nav > a:hover{ color:var(--pink); }
  .r-hdr-nav > a.is-active{ color:var(--pink); }
  .r-hdr-actions{ grid-column:3; justify-self:end; display:flex; align-items:center; gap:18px; }
}

/* ===================== MENU DRAWER ===================== */
.r-menu{ position:fixed; inset:0; z-index:100; pointer-events:none; }
.r-menu.is-open{ pointer-events:auto; }
.r-menu-scrim{ position:absolute; inset:0; background:rgba(0,0,0,.5); opacity:0; transition:opacity .28s ease; }
.r-menu.is-open .r-menu-scrim{ opacity:1; }
.r-menu-panel{ position:absolute; top:0; left:0; bottom:0; width:86%; max-width:420px; background:#000;
  transform:translateX(-100%); transition:transform .3s cubic-bezier(.16,1,.3,1);
  padding:calc(var(--hdr-h) + 8px) var(--gut) 32px; display:flex; flex-direction:column; gap:6px; overflow-y:auto; }
.r-menu.is-open .r-menu-panel{ transform:none; }
.r-menu-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.r-menu-top img{ width:110px; height:auto; }
.r-menu-x{ color:#fff; font-size:28px; line-height:1; cursor:pointer; background:none; border:none; }
.r-menu-links{ display:flex; flex-direction:column; gap:6px; }
.r-menu-link{ color:#fff; font-family:var(--font-display); font-weight:800; font-size:32px; line-height:1.06;
  text-transform:uppercase; text-decoration:none; }
.r-menu-link:hover{ color:var(--pink); }
.r-menu-link.is-active{ color:var(--pink); }
.r-menu-foot{ margin-top:24px; padding-top:24px; border-top:1px solid var(--line-dark);
  display:flex; flex-direction:column; gap:20px; }
.r-menu-ig{ display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none;
  font-family:var(--font-text); font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.02em; transition:color .15s; }
.r-menu-ig:hover{ color:var(--pink); }

/* ============================ HERO ============================ */
.r-hero{ position:relative; min-height:calc(100svh - var(--hdr-h)); overflow:hidden; background:#d9d9d9; }
.r-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.r-hero-grad{ position:absolute; left:0; right:0; bottom:0; height:46%;
  background:linear-gradient(to bottom, transparent, rgba(0,0,0,.55) 55%, #000); }
.r-hero-body{ position:absolute; left:0; right:0; bottom:0; padding-bottom:40px; }
.r-hero-inner{ display:flex; flex-direction:column; gap:32px; }
.r-hero-col{ display:flex; flex-direction:column; gap:16px; }
@media (min-width:1024px){ .r-hero-col{ max-width:760px; } .r-hero-body{ padding-bottom:56px; } }
@media (min-width:1440px){ .r-hero-col{ max-width:900px; } }
.r-hero-badge{ align-self:flex-start; background:var(--pink); color:var(--indigo);
  font-family:var(--font-text); font-weight:700; font-size:14px; padding:6px 8px; letter-spacing:.01em; }
@media (min-width:1024px){ .r-hero-badge{ font-size:16px; padding:7px 10px; } }
.r-hero-h1{ margin:0; color:#fff; font-family:var(--font-display-cond); font-weight:900; text-transform:uppercase;
  font-size:80px; line-height:.88; letter-spacing:.005em; }
@media (min-width:768px){  .r-hero-h1{ font-size:104px; } }
@media (min-width:1024px){ .r-hero-h1{ font-size:120px; } }
@media (min-width:1440px){ .r-hero-h1{ font-size:150px; } }
.r-hero-sub{ margin:0; color:#fff; font-family:var(--font-text); font-size:20px; line-height:1.1; }
@media (min-width:1024px){ .r-hero-sub{ font-size:26px; } }
.r-hero-cta{ width:100%; }
@media (min-width:768px){ .r-hero-cta{ width:300px; } }

/* ===================== MORE THAN A FESTIVAL ===================== */
.r-mtf{ display:flex; flex-direction:column; gap:24px; }
.r-mtf-text{ display:flex; flex-direction:column; gap:16px; }
.r-mtf-h{ margin:0; color:#fff; font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  line-height:.8; font-size:clamp(72px,9.5vw,150px); }
.r-mtf-h .pink{ color:var(--pink); }
.r-mtf-sub{ margin:0; color:#fff; font-family:var(--font-text); font-weight:700; font-size:24px; line-height:1.08; }
@media (min-width:1024px){ .r-mtf-sub{ font-size:30px; } }
.r-mtf-body{ margin:0; color:#fff; font-family:var(--font-text); font-size:16px; line-height:1.375; max-width:52ch; }
@media (min-width:1024px){ .r-mtf-body{ font-size:18px; } }
.r-mtf-pillars img{ width:100%; height:auto; }
@media (min-width:768px){
  .r-mtf{ display:grid; column-gap:48px; row-gap:24px; align-items:center;
    grid-template-columns:1.05fr .95fr; grid-template-areas:"text pillars" "cta pillars"; }
  .r-mtf-text{ grid-area:text; }
  .r-mtf-pillars{ grid-area:pillars; align-self:center; }
  .r-mtf-cta{ grid-area:cta; align-self:start; }
}
@media (min-width:1024px){ .r-mtf{ column-gap:80px; } }

/* ===================== WHAT'S NEW ===================== */
/* tabs + card rail are full-bleed: they span the viewport so items
   slide off the screen edges (no mid-content clip), but the first item
   stays aligned to the .r-wrap content gutter via the padding calc. */
.r-bleed-pad{
  padding-left:  max(var(--gut), calc((100% - var(--maxw)) / 2 + var(--gut)));
  padding-right: max(var(--gut), calc((100% - var(--maxw)) / 2 + var(--gut)));
}
.r-wn-title{ color:#fff; margin-bottom:24px; }
.r-tabs{ display:flex; gap:12px; overflow-x:auto; padding-bottom:2px;
  padding-left:  max(var(--gut), calc((100% - var(--maxw)) / 2 + var(--gut)));
  padding-right: max(var(--gut), calc((100% - var(--maxw)) / 2 + var(--gut))); }
.r-tab{ flex:none; cursor:pointer; height:36px; padding:8px 16px; display:flex; align-items:center;
  border:1px solid var(--fg-3); background:transparent; transition:background .15s, border-color .15s; }
.r-tab img{ height:16px; width:auto; display:block; }
.r-rail{ display:flex; gap:16px; overflow-x:auto; padding-top:32px;
  padding-left:  max(var(--gut), calc((100% - var(--maxw)) / 2 + var(--gut)));
  padding-right: max(var(--gut), calc((100% - var(--maxw)) / 2 + var(--gut))); }

/* event card */
.r-ecard{ width:318px; flex:none; border:1px solid var(--fg-2); background:#000; }
@media (min-width:1440px){ .r-ecard{ width:344px; } }
.r-ecard-media{ position:relative; width:100%; aspect-ratio:1/1; background:#222; }
.r-ecard-media > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.r-ecard-label{ position:absolute; left:0; top:0; }
.r-ecard-body{ padding:16px 24px 24px; }
.r-ecard-title{ margin:0; color:#fff; font-family:var(--font-text); font-weight:700; font-size:24px; line-height:1.08; }
.r-ecard-date{ color:var(--fg-3); font-family:var(--font-text); font-size:16px; line-height:1.375; margin:16px 0 4px; }
.r-ecard-venue{ display:flex; align-items:center; gap:4px; color:#fff; font-family:var(--font-text); font-size:14px; line-height:1.42; }

/* ===================== SCHEDULE ===================== */
.r-sched{ max-width:1040px; }  /* head + list share one width so the date aligns with the table */
.r-sched-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; gap:16px; }
.r-sched-h{ color:#fff; font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(32px,4.4vw,56px); line-height:1; }
.r-sched-date{ color:#fff; font-family:var(--font-display); font-weight:800; font-size:clamp(32px,4.4vw,56px); line-height:1; }
.r-sched-list{ }
.r-sched-row{ position:relative; display:grid; grid-template-columns:63px 1fr auto; align-items:flex-start;
  gap:12px; padding:20px 0; border-top:1px solid var(--line-dark); }
.r-sched-row:first-child{ border-top:none; }
.r-sched-dot{ position:absolute; left:0; top:4px; width:12px; height:12px; }
.r-sched-time{ color:#fff; font-family:var(--font-text); font-size:16px; line-height:1.1; padding-left:20px; }
.r-sched-main{ border-left:1px solid var(--line-dark); padding-left:24px; }
.r-sched-title{ color:#fff; font-family:var(--font-text); font-size:20px; line-height:1.1; }
.r-sched-venue{ display:flex; align-items:center; gap:4px; color:#fff; font-family:var(--font-text); font-size:14px; line-height:1.42; margin-top:8px; }
@media (min-width:1024px){
  .r-sched-row{ grid-template-columns:140px 1fr auto; padding:26px 0; align-items:center; }
  .r-sched-time{ font-size:20px; }
  .r-sched-title{ font-size:28px; }
  .r-sched-venue{ font-size:16px; }
}

/* ===================== NOTÍCIAS (white) ===================== */
.r-news-h{ color:#000; margin-bottom:24px; }
.r-news{ display:flex; flex-direction:column; gap:24px; }
.r-news-list{ display:flex; flex-direction:column; gap:24px; }
.r-news-cta{ margin-top:32px; }
/* highlight card */
.r-newshl{ display:flex; flex-direction:column; gap:16px; }
.r-newshl-img{ height:190px; overflow:hidden; background:#ddd; }
.r-newshl-img img{ width:100%; height:100%; object-fit:cover; }
.r-newshl-meta{ display:flex; flex-direction:column; gap:8px; }
.r-newshl-title{ margin:0; color:#0E0E0E; font-family:var(--font-text); font-weight:700; font-size:20px; line-height:1.1; }
.r-newshl-ex{ margin:0; color:#0E0E0E; font-family:var(--font-text); font-size:16px; line-height:1.375; }
/* horizontal news card */
.r-newscard{ display:flex; gap:16px; align-items:flex-start; }
.r-newscard-thumb{ width:88px; height:88px; flex:none; background:#ddd; overflow:hidden; }
.r-newscard-thumb img{ width:100%; height:100%; object-fit:cover; }
.r-newscard-body{ display:flex; flex-direction:column; gap:8px; flex:1; }
.r-newscard-title{ margin:0; color:#0E0E0E; font-family:var(--font-text); font-weight:700; font-size:20px; line-height:1.1; }
.r-rule{ height:1px; background:var(--line-mid); }
@media (min-width:768px){
  .r-news{ display:grid; column-gap:48px; row-gap:24px; align-items:start;
    grid-template-columns:1.08fr .92fr; grid-template-areas:"hl list" "hl cta"; }
  .r-newshl{ grid-area:hl; }
  .r-news-list{ grid-area:list; }
  .r-news-cta{ grid-area:cta; align-self:start; max-width:300px; margin-top:0; }
  .r-newshl-img{ height:auto; aspect-ratio:3/2; }
  .r-newshl-title{ font-size:28px; }
  .r-newshl-ex{ font-size:18px; }
}
@media (min-width:1024px){
  .r-news{ column-gap:80px; grid-template-columns:1.15fr .85fr; }
  .r-newshl-title{ font-size:34px; }
  .r-newscard-thumb{ width:120px; height:120px; }
  .r-newscard-title{ font-size:22px; }
}

/* ===================== FROM THE FEED ===================== */
.r-feed-head{ display:flex; align-items:center; gap:24px; margin:20px 0 24px; color:#fff; }
.r-feed-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (min-width:768px){  .r-feed-grid{ grid-template-columns:repeat(3,1fr); gap:12px; } }
@media (min-width:1024px){ .r-feed-grid{ grid-template-columns:repeat(6,1fr); } }
.r-feed-cell{ aspect-ratio:1/1; background:#222; overflow:hidden; }
.r-feed-cell img{ width:100%; height:100%; object-fit:cover; }

/* ===================== NEWSLETTER (indigo) ===================== */
.r-nl-h{ color:#fff; margin-bottom:24px; }
.r-nl-form{ max-width:560px; }
.r-nl-input{ width:100%; background:transparent; border:none; border-bottom:2px solid #fff; color:#fff;
  font-family:var(--font-text); font-size:18px; padding:0 0 12px; outline:none; }
.r-nl-input::placeholder{ color:rgba(255,255,255,.7); }
.r-nl-check{ display:flex; gap:12px; align-items:flex-start; margin:40px 0 24px; cursor:pointer; }
.r-nl-box{ width:24px; height:24px; flex:none; border-radius:4px; background:#fff; display:flex; align-items:center; justify-content:center; }
.r-nl-box span{ color:var(--indigo); font-weight:800; font-size:16px; }
.r-nl-consent{ color:#fff; font-family:var(--font-text); font-size:16px; line-height:1.375; }
.r-nl-ok{ color:#fff; font-family:var(--font-text); font-size:20px; }
.r-nl-cta{ max-width:300px; }
@media (min-width:1024px){
  .r-nl{ display:grid; grid-template-columns:1fr 1fr; column-gap:80px; align-items:center; }
  .r-nl-h{ margin-bottom:0; }
}

/* ===================== FOOTER (editorial hub) ===================== */
.r-ft{ background:#000; border-top:1px solid var(--line-dark);
  padding-top:var(--band-y); padding-bottom:32px; }
.r-ft > .r-wrap{ display:flex; flex-direction:column; }

/* top: brand + nav + legal */
.r-ft-top{ display:flex; flex-direction:column; gap:44px; padding-bottom:48px; }
.r-ft-brand{ display:flex; flex-direction:column; gap:20px; }
.r-ft-logo{ display:block; }
.r-ft-logo img{ width:150px; height:auto; }
.r-ft-tagline{ margin:0; color:var(--fg-3); font-family:var(--font-text); font-weight:700;
  font-size:13px; letter-spacing:.04em; text-transform:uppercase; }
.r-ft-social{ display:flex; gap:12px; }
.r-ft-social a{ width:44px; height:44px; border:1px solid var(--line-dark); color:#fff;
  display:flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s, color .15s; }
.r-ft-social a:hover{ background:var(--pink); border-color:var(--pink); color:#000; }
.r-ft-col{ display:flex; flex-direction:column; gap:14px; }
.r-ft-col-h{ margin:0 0 6px; color:var(--fg-3); font-family:var(--font-text); font-weight:700;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.r-ft-col a{ color:#fff; font-family:var(--font-text); font-weight:700; font-size:15px;
  text-decoration:none; width:fit-content; transition:color .15s; }
.r-ft-col a:hover{ color:var(--pink); }

/* partners — tiered hierarchy, separated band */
.r-ft-partners{ display:flex; flex-direction:column; gap:32px;
  padding:40px 0; border-top:1px solid var(--line-dark); }
.r-ft-label{ color:var(--fg-3); font-family:var(--font-text); font-weight:700; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px; }
.r-ft-logos{ display:flex; flex-wrap:wrap; align-items:center; column-gap:32px; row-gap:20px; }
.r-plogo{ filter:brightness(0) invert(1); display:block; width:auto; height:auto; max-height:30px; max-width:118px; }
.r-plogo--main{ max-height:44px; max-width:170px; }
.r-plogo--sm{ max-height:26px; max-width:104px; opacity:.92; }

/* base bar */
.r-ft-base{ display:flex; flex-direction:column; gap:16px; align-items:flex-start;
  padding-top:28px; border-top:1px solid var(--line-dark); }
.r-ft-copy{ color:var(--fg-3); font-family:var(--font-text); font-size:13px; letter-spacing:.02em; }
.r-ft-top-btn{ background:none; border:none; padding:0; cursor:pointer; color:#fff;
  font-family:var(--font-text); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.06em; transition:color .15s; }
.r-ft-top-btn:hover{ color:var(--pink); }

@media (min-width:768px){
  .r-ft-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; align-items:start; }
  .r-ft-partners{ display:grid; grid-template-columns:1.2fr 1fr 1.4fr; column-gap:48px; align-items:start; }
  .r-ft-base{ flex-direction:row; justify-content:space-between; align-items:center; }
}
@media (min-width:1024px){
  .r-ft-top{ grid-template-columns:2fr 1fr 1fr; gap:64px; padding-bottom:56px; }
  .r-ft-partners{ gap:56px; }
}