/*
  FILE: dfg.css
  PURPOSE: Styles specific to the DfG project page only, not reused by any
  other project (see project.css for the shared patterns every project
  page uses: header/Role/full-size image/Collaborators/Similar
  projects/etc, linked before this file). Covers: the "text overlaid on
  the full size image" pattern (desktop) / "text above the image" pattern
  (mobile), a heading-less row-group section for Final designs (same idea
  as thekey.css), a fix for <picture> elements breaking inside a flex row
  (same fix as thekey.css), the story poster's full-width treatment, the
  characters/tree/icons combined row (a CSS grid on desktop, a plain
  stack on mobile), and drop shadows on 5 of the Final designs images.
*/

/* ---- Section, Full size image: text callout ---- */
/* Desktop: overlaid top-left on the image, a new pattern for this site
   (every other Full size image is just the plain photo). Loosely
   modelled on CSA Game's .project-final-designs__callout treatment (a
   light card box, not plain text straight over the photo), for
   guaranteed WCAG AA contrast regardless of what's behind it, using this
   page's own tokens instead of CSA Mobile's page-specific colours.
   Responsive width (not a fixed px) with a max-width, so it can't
   overflow on narrow screens. */
.dfg-full-size {
  position: relative;
}

.dfg-full-size__callout {
  position: absolute;
  top: 40px;
  left: 40px;
  max-width: 360px;
  width: calc(100% - 80px);
  box-sizing: border-box;
  padding: 10px; /* was 20px 24px, per Lucrecia's request */
  border-radius: var(--radius-image);
  background: var(--color-bg-default);
  /* No shadow, per Lucrecia's request (was var(--shadow-image)) */
}

.dfg-full-size__callout p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-project-body);
  line-height: var(--line-height-project-body);
  font-weight: var(--weight-regular);
  color: var(--color-text-dark);
}

/* Mobile per the brief: moved above the image instead of overlaid on
   it, as a plain text block with the page's regular padding/spacing,
   the card background/corners/shadow removed entirely (it doesn't need
   contrast-safe styling any more, it's sitting on the page's own
   background, not on the photo). display: flex + order lets this move
   above the image visually without changing the HTML/DOM order (the
   image staying first in markup doesn't matter either way, but keeping
   the callout element where it is avoids two different desktop/mobile
   copies of the same text). 50px top padding matches the standard gap
   already used at the top of every other section on this page, 20px
   bottom is a smaller judgement-call gap before the image, 20px sides
   matches the page's usual mobile inset. */
@media (max-width: 768px) {
  .dfg-full-size {
    display: flex;
    flex-direction: column;
  }

  .dfg-full-size__callout {
    position: static;
    order: -1;
    width: auto;
    max-width: none;
    padding: 50px 20px 20px;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .dfg-full-size .project-full-image {
    height: auto;
    object-fit: initial;
  }
}

/* ---- Section, Final designs: row-groups with no heading of their own ---- */
/* Same fix as thekey.css: .project-showcase__grid normally sits below a
   .project-showcase__heading and carries its own 30px top margin for
   that gap, every row-group here is just a bare grid with no heading
   above it, so that margin would leave an unwanted 30px gap at the top
   of each one, zeroed out here instead. */
.dfg-final__row-section .project-showcase__grid {
  margin-top: 0;
}

/* 50px between the title and the first row-group, both breakpoints,
   per Lucrecia's request (was 40px mobile / 30px desktop). Same
   technique both times: the title's own bottom padding is zeroed,
   letting its H2's 15px bottom margin (.project-copy__title, shared)
   collapse through and sit right after the title text, then the first
   row's own top padding makes up the remainder (15 + 35 = 50). */
@media (max-width: 768px) {
  .dfg-final__title-section {
    padding-bottom: 0;
  }

  .dfg-final__row-1 {
    padding-top: 35px;
  }
}

@media (min-width: 769px) {
  .dfg-final__title-section {
    padding-bottom: 0;
  }

  .dfg-final__row-1 {
    padding-top: 35px;
  }
}

/* Same fix as thekey.css: 4 of the Final designs images have a dedicated
   mobile crop via <picture><source media="(max-width: 768px)">, which
   breaks inside a flex row/grid otherwise (the <picture> itself becomes
   the flex item instead of the <img> inside it). display: contents makes
   the <picture> invisible to layout, <source> is hidden explicitly since
   it becomes a visible phantom flex item once its parent is
   display: contents. */
.project-showcase__grid picture {
  display: contents;
}

.project-showcase__grid picture source {
  display: none;
}

/* ---- Row 1 and row 2: soft drop shadows ---- */
/* Per the brief: images 1 (desktop only), 2, 7, 8 and 9 all get the
   site's standard image shadow.
   filter: drop-shadow(), not box-shadow: box-shadow always draws around
   an element's rectangular BOX, with no awareness of the image's own
   transparency, so on a PNG with real transparent regions (checked all
   4 PNGs here, 1, 7 and 8 all have some, only 9 is fully opaque) it
   drew a shadow around the whole rectangle, showing up as an unwanted
   pale halo/background wherever the image was actually transparent,
   reported on image 7 specifically (a visible gap between its 2 "cards"),
   but the same underlying cause would affect 1 and 8 too, applying the
   fix to all of them pre-emptively rather than leaving a known-identical
   bug for images the brief didn't happen to mention. drop-shadow follows
   the actual visible (non-transparent) pixel shapes instead, exactly the
   "shadow on the individual shapes, not the container" the brief asked
   for. --shadow-image's own value (offset-x offset-y blur-radius color,
   no spread) already matches drop-shadow()'s argument shape exactly, so
   the same token works unchanged, just under filter instead of
   box-shadow. Image 2 is a .jpg (no transparency possible) and image 9
   has no alpha channel, so this is a no-op visual change for those two,
   included anyway for one consistent property across all 5 rather than
   mixing box-shadow and filter per image. */
.dfg-final__poster,
.dfg-final__img7,
.dfg-final__img8,
.dfg-final__img9 {
  filter: drop-shadow(var(--shadow-image));
}

@media (min-width: 769px) {
  .dfg-final__img1 {
    filter: drop-shadow(var(--shadow-image));
  }
}

/* ---- Row: the characters/tree/icons combined section ---- */
/* Desktop per the brief: 2 columns via CSS grid, left column stacks
   image 4 over image 6 with a horizontal dashed divider between them,
   right column is image 5, spanning both grid rows so its height
   (+ the section's own top/bottom padding, shared by the whole row)
   automatically matches the left column's total height, that's just how
   a row-spanning grid item sizes itself, no extra height maths needed.
   A vertical dashed divider (same absolute-positioned technique as The
   Key's row dividers) marks the column split, centred at 50% since both
   columns are equal width. */
@media (min-width: 769px) {
  .dfg-final__combo-section {
    position: relative;
  }

  .dfg-final__vdivider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 0;
    border-left: 1px dashed var(--color-text-dark);
  }

  /* grid-template-rows is 2 EXPLICIT heights (not "auto auto"): auto
     rows would size to whichever spanning item needs the most room, and
     image 5 (grid-row: 1 / span 2 below) turned out to want more height
     at this column's width than images 4+6 naturally add up to, which
     inflated the gap between 4 and 6 rather than actually matching
     image 5's height to the left column, found while checking this
     feedback. Computing both rows' heights explicitly from images 4 and
     6's own real aspect ratios (1.175, 3.287) at the column's own width
     avoids that: image 5, spanning both fixed-height rows + the row-gap
     between them, always ends up exactly as tall as the left column,
     by construction, not by relying on auto-sizing to work it out.
     102px = 82px (section padding + page border) + 20px (column-gap);
     21px on the second row accounts for image 6's own divider padding
     + border below. Recalculate all 3 numbers if either image, the
     column-gap, or the divider's own padding ever change. */
  .dfg-final__combo-row {
    --combo-col-width: calc((min(100vw, 1200px) - 102px) / 2);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: calc(var(--combo-col-width) / 1.175) calc(var(--combo-col-width) / 3.287 + 21px);
    column-gap: 20px;
    row-gap: 20px;
  }

  /* height: 100%/width: 100% (not the shared width: 100% + auto height)
     so each image fills its own fixed-size grid cell exactly, object-fit:
     contain then shows each at its own real proportions within that
     cell without cropping, centred by default. Since the row heights
     above were computed FROM images 4 and 6's own ratios in the first
     place, contain produces no visible letterboxing for those two, only
     image 5 (a different ratio) may show a little, that's expected. */
  img.dfg-final__combo-4,
  img.dfg-final__combo-5,
  img.dfg-final__combo-6 {
    height: 100%;
    width: 100%;
    object-fit: contain;
  }

  img.dfg-final__combo-4 {
    grid-column: 1;
    grid-row: 1;
  }

  img.dfg-final__combo-6 {
    grid-column: 1;
    grid-row: 2;
    border-top: 1px dashed var(--color-text-dark);
    padding-top: 20px;
    box-sizing: border-box;
    /* Straight ends on the dashed line: this image carries the shared
       rounded-corner radius, which otherwise curves the border-top
       along with the image's own top corners. Zeroed only on the top
       corners, so the bottom stays rounded, per the brief. */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  img.dfg-final__combo-5 {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* Mobile: no vertical divider (the columns have already collapsed into
   one), and dashed horizontal dividers between images 4-5 and 5-6, per
   Lucrecia's request (was 4-5 only, missing between 5 and 6). Straight
   ends on each line: images 4 and 5 carry the shared rounded-corner
   radius, zeroed only on the bottom corners so the top stays rounded,
   same fix already used on The Key's own mobile dividers. */
@media (max-width: 768px) {
  .dfg-final__vdivider {
    display: none;
  }

  img.dfg-final__combo-4,
  img.dfg-final__combo-5 {
    /* 50px above the line (was 20px), per Lucrecia's request to match
       the site's standard divider clearance. */
    padding-bottom: 50px;
    border-bottom: 1px dashed var(--color-text-dark);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-sizing: border-box;
  }

  /* 50px below each line too, overriding the shared 10px mobile row
     gap (project.css) just for this row so it's scoped to this combo
     of images only, not every showcase row on the page. */
  .dfg-final__combo-row {
    gap: 50px;
  }
}

/* ---- Note on development + Impact images: 5px corner radius, per
   Lucrecia's request -- scoped to just these two sections since Role
   shares the same .project-role__image class on this page but wasn't
   asked for the same treatment. */
section[aria-labelledby="section-development-title"] .project-role__image,
section[aria-labelledby="section-impact-title"] .project-role__image {
  border-radius: 5px;
}