/* ---------------------------------------------------------------
   Your overrides. This file loads last, so anything here wins over
   the generated Webflow stylesheet. Edit freely.
   --------------------------------------------------------------- */

/* The "Made in Webflow" badge is injected by the Webflow runtime on
   webflow.io subdomains. Webflow's own code export omits it, so it is
   hidden here. Delete this rule to show it again. */
.w-webflow-badge {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Project titles always visible on desktop
   ---------------------------------------------------------------------------
   Webflow's hover interaction keeps each tile's caption at opacity 0 with its
   two headings translated out of an overflow:hidden strip, so on desktop a
   visitor scrolled past fourteen unlabelled clips and only learned that the
   work was for Bajaj, Sony, Swiggy or Parachute if they happened to mouse over
   a tile. Phones already show the captions — Webflow disables the interaction
   below 992px — so this just brings the desktop in line.

   The dark gradient behind the caption is part of .block-project already, so
   it comes along and keeps the text legible over bright footage.

   The interaction still runs on hover; it simply animates to where the tile
   already is. Delete this block to go back to hover-only.
   --------------------------------------------------------------------------- */
@media screen and (min-width: 992px) {
  .block-project {
    opacity: 1 !important;
  }

  .block-project .heading-project,
  .block-project .subheading-project {
    transform: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Producer page heading
   ---------------------------------------------------------------------------
   The name and role sit in an h2, which the theme sets at 48px on desktop and
   steps down to 42 / 35 / 30 at its breakpoints. Scaled down about a fifth at
   each step, keeping the same ladder. The role line is a <sub>, so it stays at
   75% of whichever size applies. Adjust the four numbers to taste.
   --------------------------------------------------------------------------- */
.heading-4 {
  font-size: 38px;
  line-height: 112%;
}

@media screen and (max-width: 991px) {
  .heading-4 { font-size: 34px; }
}

@media screen and (max-width: 767px) {
  .heading-4 { font-size: 29px; }
}

@media screen and (max-width: 479px) {
  .heading-4 { font-size: 25px; }
}

/* ---------------------------------------------------------------------------
   Producer portfolio posters
   ---------------------------------------------------------------------------
   Two faults came from the same place. The first seven posters sit inside a
   .div-block and carry .image-6-copy; the last four have neither, so they
   rendered 478px wide against the others' 179-247px. And because every poster
   is a different height, the captions ended up anywhere from 2px to 116px
   below their image.

   One uniform box fixes both: every poster the same height, scaled to fit
   rather than cropped (they are posters - cropping would cut off titles),
   centred in its column, with the caption a fixed distance underneath.

   These five classes appear only on producer.html, so this affects nothing
   else. Change the height below to make the row of posters larger or smaller.
   --------------------------------------------------------------------------- */
.container-4 img,
.container-4-copy > img,
.image-6-copy {
  display: block;
  width: auto;
  height: 300px;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto;
  padding-bottom: 0;
}

/* the wrapper clipped the first seven to 75% of a fixed row; the images now
   size themselves, so it no longer needs to crop */
.div-block {
  height: auto;
  overflow: visible;
}


@media screen and (max-width: 991px) {
  .container-4 img,
  .container-4-copy > img,
  .image-6-copy { height: 260px; }
}

@media screen and (max-width: 767px) {
  .container-4 img,
  .container-4-copy > img,
  .image-6-copy { height: 220px; }
}

/* ---------------------------------------------------------------------------
   Page top spacing
   ---------------------------------------------------------------------------
   The navbar is fixed and 105px tall, and .section-top carried 240px of top
   padding to clear it - far more than needed, leaving a slab of black on every
   page. On the producer page .section-top has no heading in it at all, so it
   was 258px of nothing before the content began.
   --------------------------------------------------------------------------- */
.section-top {
  padding-top: 150px;
}

/* no heading inside it: just clear the fixed navbar and stop */
.section-top:empty {
  padding-top: 110px;
  padding-bottom: 0;
}

@media screen and (max-width: 767px) {
  .section-top { padding-top: 120px; }
  .section-top:empty { padding-top: 80px; }
}

/* ---------------------------------------------------------------------------
   Portfolio captions belong to the poster above them
   ---------------------------------------------------------------------------
   With no space beneath a caption, it sat hard against the next poster and
   read as that one's label - "EXECUTIVE PRODUCER / Discovery India" appeared
   to belong to the Irada poster below it. A small gap above and a large one
   below groups each caption with its own image.
   --------------------------------------------------------------------------- */
.text-block-4 {
  margin-top: 12px;
  margin-bottom: 64px;
  /* these inherited the 20px body size, which made the role and company
     wrap to three lines and compete with the posters. */
  font-size: 15px;
  line-height: 1.45;
}

@media screen and (max-width: 991px) {
  .text-block-4 { font-size: 14px; }
}

@media screen and (max-width: 479px) {
  .text-block-4 { font-size: 13px; }
}

/* ---------------------------------------------------------------------------
   Navigation: show which page you are on, and respond to the pointer
   ---------------------------------------------------------------------------
   Webflow marks the current page with .w--current but styled it identically to
   every other link, so nothing indicated where you were.
   --------------------------------------------------------------------------- */
.nav-link {
  transition: opacity .2s ease;
}

.nav-link:hover,
.nav-link:focus-visible {
  opacity: .55;
}

.nav-link.w--current {
  opacity: 1;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

/* ---------------------------------------------------------------------------
   Last four posters: one row, not two
   ---------------------------------------------------------------------------
   These sat in two separate two-column grids, so four posters took two rows
   while the seven above them ran four and three across. The two grids are now
   merged in the markup and laid out four across, matching the row above. The
   80px gaps were sized for two columns and are too wide for four.
   --------------------------------------------------------------------------- */
.container4 {
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas: none;
  column-gap: 40px;
  row-gap: 48px;
}

/* Two of the four are pinned to a named area, "Area-2", from the two-column
   layout. With the areas cleared that name no longer resolves, so the browser
   invented implicit tracks and scattered them across six columns. !important
   is needed here: the other two are placed by #w-node-... id rules, which
   outrank any class selector. */
.container4 > * {
  grid-area: auto !important;
}

/* Webflow's .w-container carries ::before/::after clearfix boxes. In a grid
   those count as items, so they took the first cells and pushed the posters
   along by one - three on row one and the fourth wrapped underneath. */
.container4::before,
.container4::after {
  display: none;
}

@media screen and (max-width: 991px) {
  .container4 { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 479px) {
  .container4 { grid-template-columns: 1fr; }
}