/* ───────── Content widths (desktop) ─────────
   Every block on the desktop site uses one of four widths:
     Full    the window minus the page margin (--gutter): header, footer, banner text
     Wide    1200px: grids and rows (projects, awards, films, people, clients,
             podcast), trailers, lead images, film poster block
     Medium  960px: photos an editor set to "medium" inside project pages; Contact offices
     Text    750px: all reading text (intros, project and film text, bios, credits)
   On narrower windows each width shrinks so the page margin stays on both sides.
   Wide grids share three columns with 32px between them, so posters, project
   cards, portraits and logos line up down the page.
   Loaded on the desktop version only, after site-fixes.css and type-system.css. */

:root {
  --w-wide: 1200px;
  --w-medium: 960px;
  --w-text: 750px;
  --col-gap: 32px;
}
@media (max-width: 1100px) { :root { --col-gap: 24px; } }

/* ── Full: footer and homepage banner text on the same margin as the menu ── */
.main-footer-content, .main-footer-content-top {
  padding-left: var(--gutter) !important; padding-right: var(--gutter) !important;
  max-width: none !important;
}
.projects_slider_text_path { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }

/* ── Wide (1200) containers ── */
.home-slider > .slideshow-main,                     /* homepage sections */
.films_list_rr .companies-bottom-content,          /* Film & TV page */
.clients_container_main .companies-bottom-content, /* Clients page */
section.home-slider > div > .companies-bottom-content, /* homepage clients */
.movie_container, #video_s,                        /* film page */
.project_inner_top_video_bg_wrap,                  /* project and Gen Cinema trailers */
#team-cube .team-bottom-content:not(:has(> .teamconitn)), /* Leadership page */
.team-bottom-content.ai_lab,                       /* Gen Cinema services */
.mat_top, .mat_episodes, .mat_hosts,               /* Podcast page */
.awards-grid, .work-grid {
  box-sizing: border-box !important;
  width: min(var(--w-wide), calc(100vw - 2 * var(--gutter)), 100%) !important;
  max-width: none !important;
  margin-left: auto !important; margin-right: auto !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
.work-grid, .awards-grid { column-gap: var(--col-gap) !important; }
/* The parents of some of these add their own side padding; the gutter is enough. */
.films_list_rr, .clients_container_main, .project_inner_top_video_bg_wrap { padding-left: 0 !important; padding-right: 0 !important; }
.films_list_rr { width: 100% !important; }

/* Three-column rows that center a short last row (films, people, film photos):
   each item is exactly one grid column wide. */
.home-slider > .slideshow-main > .slideshow-main-content:not(.work-grid):not(.awards-grid):not(.tbl_cc),
.films_list_rr .companies-bottom-content,
#team-cube .team-bottom-content:not(:has(> .teamconitn)),
.team-bottom-content.ai_lab,
.gallery-cont {
  display: flex !important; flex-wrap: wrap !important; justify-content: center !important;
  align-items: flex-start !important;
  column-gap: var(--col-gap) !important;
}
.home-slider > .slideshow-main > .slideshow-main-content:not(.work-grid):not(.awards-grid):not(.tbl_cc),
.gallery-cont {
  width: 100% !important; max-width: none !important;
  margin-left: 0 !important; margin-right: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
.home-slider > .slideshow-main > .slideshow-main-content > .home_film_banner,
.films_list_rr .home_film_banner,
.home-slider > .slideshow-main > .slideshow-main-content > .team-bottom-item,
#team-cube .team-bottom-item:not(.teamconitn),
.team-bottom-content.ai_lab > .team-bottom-item,
.gallery-cont > .movie_gallery_block {
  box-sizing: border-box !important;
  flex: 0 0 calc((100% - 2 * var(--col-gap)) / 3) !important;
  width: calc((100% - 2 * var(--col-gap)) / 3) !important;
  margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
}
.home-slider > .slideshow-main > .slideshow-main-content > div[style*="clear"],
#team-cube .team-bottom-content > div[style*="clear"] { display: none; }
/* Group names on the Leadership page take a whole row. */
#team-cube .team-bottom-content > h1 { flex: 0 0 100%; width: 100%; }

/* Film posters fill their column (same width as a project card). */
.films_list_rr .home_film_banner { padding-bottom: 32px !important; }
/* Past Releases: five smaller posters per row inside the same 1200px. */
.films_list_rr .smaller_ittms { column-gap: var(--col-gap) !important; }
.films_list_rr .smaller_ittms .home_film_banner {
  flex: 0 0 calc((100% - 4 * var(--col-gap)) / 5) !important;
  width: calc((100% - 4 * var(--col-gap)) / 5) !important;
}

/* Portraits and service images: one size everywhere (350px circles),
   centered in their column. */
.team-bottom-item .team_itm { width: 100% !important; max-width: 350px !important; margin-left: auto !important; margin-right: auto !important; }

/* Film page photos: one column each, 32px apart; a short last row is centered. */
.gallery-cont { row-gap: var(--col-gap) !important; }
.gallery-cont > .movie_gallery_block { padding-top: 0 !important; padding-bottom: 0 !important; }

/* Homepage and Podcast page podcast block: cover in the first column, text across
   the other two, on the same grid as the cards. */
.podcastconteynn .tbl_cc, .mat_top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  column-gap: var(--col-gap) !important;
  width: 100% !important; max-width: none !important;
}
.mat_top { width: min(var(--w-wide), calc(100vw - 2 * var(--gutter)), 100%) !important; }
.podcastconteynn .tbl_c_img, .podcastconteynn .tbl_c_txt,
.mat_top .mat_top_img, .mat_top .mat_top_text {
  display: block !important; width: auto !important; max-width: none !important;
  padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important;
}
.podcastconteynn .tbl_c_img img, .mat_top .mat_top_img img { width: 100% !important; height: auto !important; display: block; }
.hosts_block { max-width: none !important; }

/* Clients: four logos per row across the 1200px; a short last row is centered. */
section.home-slider > div > .companies-bottom-content,
.clients_container_main .companies-bottom-content {
  display: flex !important; flex-wrap: wrap !important; justify-content: center !important;
  column-gap: var(--col-gap) !important;
}
.client_itmm {
  box-sizing: border-box !important;
  flex: 0 0 calc((100% - 3 * var(--col-gap)) / 4) !important;
  width: calc((100% - 3 * var(--col-gap)) / 4) !important;
  margin-left: 0 !important; margin-right: 0 !important; float: none !important;
}
section.home-slider > div > .companies-bottom-content > div[style*="clear"],
.clients_container_main .companies-bottom-content > div[style*="clear"] { display: none; }

/* Contact: offices in three columns across the medium width (960). */
.contactsn {
  box-sizing: border-box !important;
  width: min(var(--w-medium), calc(100vw - 2 * var(--gutter)), 100%) !important;
  max-width: none !important; margin-left: auto !important; margin-right: auto !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
.contactsn { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap) !important; }
.contactsn .contact-item { width: auto !important; padding-right: 0 !important; }

/* Film page: trailer and poster block 1200px. */
#video_s { padding-top: 30px !important; padding-bottom: 30px !important; }
.movie_container .movie_description { width: 100% !important; max-width: none !important; }

/* ── Text (750) ── */
.progect_bottom_text,                                     /* credits */
:is(#content, body) :is(.project_innner_information, .project_innner_information .wp-block-column) > p,
:is(#content, body) :is(.project_innner_information, .project_innner_information .wp-block-column) > h1, :is(#content, body) :is(.project_innner_information, .project_innner_information .wp-block-column) > h2,
:is(#content, body) :is(.project_innner_information, .project_innner_information .wp-block-column) > h3, :is(#content, body) :is(.project_innner_information, .project_innner_information .wp-block-column) > h4,
:is(#content, body) :is(.project_innner_information, .project_innner_information .wp-block-column) > h5, :is(#content, body) :is(.project_innner_information, .project_innner_information .wp-block-column) > h6,
:is(#content, body) :is(.project_innner_information, .project_innner_information .wp-block-column) > ul, :is(#content, body) :is(.project_innner_information, .project_innner_information .wp-block-column) > ol,
:is(#content, body) :is(.project_innner_information, .project_innner_information .wp-block-column) > blockquote,
:is(#content, body) :is(.project_innner_information, .project_innner_information .wp-block-column) > .client_date_cont,
.teamcontent,                                             /* bios */
#team-cube .team-bottom-content.teamcontent,
.team-bottom-content:has(> .teamconitn),
.smart_content > h2, .smart_content > h5, .smart_content > p {
  box-sizing: border-box !important;
  width: min(var(--w-text), calc(100vw - 2 * var(--gutter)), 100%) !important;
  max-width: none !important;
  margin-left: auto !important; margin-right: auto !important;
}
.progect_bottom_text { padding-left: 0 !important; padding-right: 0 !important; }
.teamcontent { padding-left: 0 !important; padding-right: 0 !important; }
/* The section label above an intro (EXPERIENCE DESIGN) is centered on its own. */

/* ── Project and Gen Cinema pages: images and videos by the size the editor chose ── */
/* "large", "extra large", and full-size images without a size: Wide */
:is(#content, body) :is(.project_innner_information, .project_innner_information .wp-block-column) > figure.large,
:is(#content, body) :is(.project_innner_information, .project_innner_information .wp-block-column) > figure.xtra-large,
:is(#content, body) :is(.project_innner_information, .project_innner_information .wp-block-column) > figure.wp-block-image:not(.medium):not(.small),
:is(#content, body) :is(.project_innner_information, .project_innner_information .wp-block-column) > figure.wp-block-gallery:not(.medium):not(.small),
:is(#content, body) :is(.project_innner_information, .project_innner_information .wp-block-column) > figure.wp-block-embed:not(.medium):not(.small),
:is(#content, body) :is(.project_innner_information, .project_innner_information .wp-block-column) > .wp-block-group,
:is(#content, body) :is(.project_innner_information, .project_innner_information .wp-block-column) > div.wp-block-image:not(.medium):not(.small) {
  box-sizing: border-box !important;
  width: min(var(--w-wide), calc(100vw - 2 * var(--gutter)), 100%) !important;
  max-width: none !important;
  margin-left: auto !important; margin-right: auto !important;
}
/* "medium": Medium */
:is(#content, body) :is(.project_innner_information, .project_innner_information .wp-block-column) > figure.medium,
:is(#content, body) :is(.project_innner_information, .project_innner_information .wp-block-column) > div.wp-block-image.medium {
  box-sizing: border-box !important;
  width: min(var(--w-medium), calc(100vw - 2 * var(--gutter)), 100%) !important;
  max-width: none !important;
  margin-left: auto !important; margin-right: auto !important;
}
/* "small": Text */
:is(#content, body) :is(.project_innner_information, .project_innner_information .wp-block-column) > figure.small,
:is(#content, body) :is(.project_innner_information, .project_innner_information .wp-block-column) > div.wp-block-image.small {
  box-sizing: border-box !important;
  width: min(var(--w-text), calc(100vw - 2 * var(--gutter)), 100%) !important;
  max-width: none !important;
  margin-left: auto !important; margin-right: auto !important;
}
/* The image or video fills its figure; the old theme set its own percentage. */
:is(#content, body) :is(.project_innner_information, .project_innner_information .wp-block-column) > figure img, :is(#content, body) :is(.project_innner_information, .project_innner_information .wp-block-column) > figure iframe,
:is(#content, body) :is(.project_innner_information, .project_innner_information .wp-block-column) > div.wp-block-image img,
:is(#content, body) :is(.project_innner_information, .project_innner_information .wp-block-column) > .wp-block-group img {
  width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
}
:is(#content, body) :is(.project_innner_information, .project_innner_information .wp-block-column) > figure.wp-block-gallery figure img { width: 100% !important; }

/* Podcast page: the featured episode and the hosts use the same split as the
   podcast block above them (image in the first column, text across the other two). */
.mat_episodes .episode_block.selected > .episode_block_active, .mat_hosts .host_block {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  column-gap: var(--col-gap) !important;
  align-items: start;
}
.mat_episodes .episode_block_active > img, .mat_hosts .host_block > img {
  width: 100% !important; max-width: none !important; height: auto !important; margin: 0 !important;
}
.mat_hosts .host_block > img { max-width: 350px !important; justify-self: center; }
.mat_episodes .episode_block_active > .episode_info, .mat_hosts .host_block > .host_info {
  width: auto !important; max-width: none !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
}
.mat_episodes .episode_block_active > :not(img):not(.episode_info) { grid-column: 2; }

/* Space between a section intro and its project grid: 56px, the same as the
   space between rows of cards (Experience Design, Media Production, homepage). */
.companies-bottom-content.work-grid { padding-top: 55px !important; }
.homw_works > .work-grid { margin-top: 35px !important; }

/* Project cards: name and client left-aligned, starting at the image's left edge. */
.work-grid .team_itm_txt, .work-grid .team_itm_txt .team_name, .work-grid .team_itm_txt .team_type {
  text-align: left !important;
}
.work-grid .team_itm_txt { padding-left: 0 !important; padding-right: 0 !important; }

/* Award cards: left-aligned like the project cards. */
.award-card, .award-card > div { text-align: left !important; }

/* Card image frame: the 1px #3f3f3f border sits on the frame, not on the image
   that zooms on hover, so it stays visible while the image grows inside it.
   Award images get the same frame as project and film cards. */
.home_project_banner_link { border: 1px solid #3f3f3f !important; border-radius: 5px; overflow: hidden; }
.home_project_banner_link .home_slide_desktop { border: 0 !important; }
.award-card .blog-item-top-image { border: 1px solid #3f3f3f !important; border-radius: 5px; overflow: hidden; box-sizing: border-box; }

/* Award images zoom on hover like project cards: 1.1×, 0.2s ease-in-out,
   inside the bordered frame. */
.award-card .award-img { transition: transform 0.2s ease-in-out; }
.award-card .award-img:hover { transform: scale(1.1); }

/* Intro paragraphs at 20px: narrower than the text width (680px) so they keep about
   three lines. */
.smart_content > h5.wp-block-heading.small { width: min(680px, calc(100vw - 2 * var(--gutter)), 100%) !important; }