/* ============================================================
   SILICA WORKS - menu panel, page-level layout
   ------------------------------------------------------------
   The three-column panel (featured plate, links, rotating
   widget) that home.html lays out in its own <style> block.
   Copied here verbatim so faq.html and contact.html open the
   same panel without each carrying a second inline copy.

   home.html keeps its inline block, so the two must be kept in
   step by hand: a change to one belongs in the other. If the
   home page ever links this file instead, its inline copy can
   simply be deleted - the rules are identical.

   Loaded after css/menu.css, the same position the inline
   block holds on the home page, so the cascade is unchanged.
   ============================================================ */

/* Tighten the gap above the Reach us / Legal row. The grid's
   row-gap sits on top of the row's own padding, so both come down. */
.sw-menu .sw-menu-overlay {
  row-gap: 1rem;
}

.sw-menu .sw-menu-overlay-row {
  padding-top: 1rem;
}

/* --------------------------------------------------------
   Featured plate - replaces the old "Navigate" column
   --------------------------------------------------------
   The panel used to carry the four page links twice: once as
   display type on the left, once as the bordered rows in the
   Menu column. The left stack is gone and this plate takes its
   place, so the links live in exactly one spot.

   It is a GRID column, not a flex child of .sw-menu-overlay-items
   like the old link stack was. Inside that flex row it could only
   ever be as tall as the Menu column beside it, which left a band
   of dead panel under it. As a column spanning both content rows
   it runs the full height, the same way the media widget on the
   far right does - which is what makes the two read as a pair
   rather than as one image and one thumbnail.
   -------------------------------------------------------- */
/* ========================================================
   WIDE ONLY - everything from here to the closing brace is
   the three-column desktop panel.
   --------------------------------------------------------
   menu.css stacks the overlay to a single column at 1000px
   ("Single column on mobile", css/menu.css:920). These page
   rules are later in the cascade, so without this guard they
   won that fight at every width: measured at 390px the grid
   came out as "170px 85.75px 0px", which collapsed the media
   widget to zero width off the side of the panel and squeezed
   the Menu links to 86px.

   The narrow layout is menu.css's job. This block only
   describes the wide one.
   ======================================================== */
@media (min-width: 1001px) {

.sw-menu .sw-menu-overlay {
  /* Three columns: plate, links, widget. The links keep the 1fr
     so they take the slack; both images are fixed, so the
     panel's width is the only thing that moves.

     Column 1 is PINNED to the plate's width rather than left on
     `auto`. `auto` sizes a column to its widest item, and with
     the reach/legal row spanning into this column that is the
     row, not the image - measured, it pulled column 1 out to
     294px and squeezed the Menu links down to 86px. Pinning it
     to the plate's own width keeps the image in charge of the
     column it leads, and lets the links keep the slack. */
  grid-template-columns: 170px 1fr auto;
}

.sw-menu .sw-menu-overlay-col-plate {
  /* Direct child of the panel now, so it needs to be lifted above
     the painted SVG face the same way the other blocks are. */
  position: relative;
  z-index: 1;
  grid-column: 1;
  /* ROW 1 ONLY - it does not span down any more.
     --------------------------------------------------------
     Spanning both rows made this a full-height column, which
     forced the reach/legal row out into column 2 and left the
     panel carrying three full-height columns. Measured, those
     came to 260 + 232 + 300 = 792px plus gaps inside an 856px
     panel: the media widget's right edge landed at 1308px
     against an overlay ending at 1228px, so the far image was
     clipped by 80px against .sw-menu-overlay-clip.

     Back in row 1, the socials sit under the plate in this same
     column (see the row's grid-column below), the panel is two
     columns of content plus the widget, and the widget has the
     room to show in full. */
  grid-row: 1;
  /* NOT stretched. The column is sized to the plate's own
     height now rather than pulled down the panel, which is what
     lets the image be genuinely small instead of merely narrow
     - a stretched column would keep the frame's flex:1 growing
     it back to the row's full height. */
  align-self: start;
  /* Down from 210px, then 260px, then 340px. The plate is the
     panel's lead image, not its subject: at every larger size
     it outweighed the navigation beside it, which is the thing
     an opened menu exists to show. */
  width: 170px;
  flex-direction: column;
  /* Matches the Menu column's header-to-content gap (2rem on
     .sw-menu-overlay-sub-col, css/menu.css) rather than the
     widget's 0.75rem. The two columns lead with the same small
     header on the same line, so an unequal gap below it started
     the image 20px above the first link's rule - measured, the
     plate's frame at 341px against the links at 361px. Sharing
     the gap puts the image's top edge on that rule and the two
     columns read as one block. */
  gap: 2rem;
  display: flex;
  min-width: 0;      /* lets the plate shrink rather than overflow */
}

/* The links take column 2. The reach/legal row spans columns 1
   AND 2, so the two halves of it land under the two things they
   belong to: the socials under the plate, the legal links under
   the Menu column. menu.css already lays that row out as a flex
   with the two blocks side by side, so they read as one line
   across the foot of the panel rather than as two stacks. */
.sw-menu .sw-menu-overlay-items { grid-column: 2; }
.sw-menu .sw-menu-overlay-row   { grid-column: 1 / span 2; }
.sw-menu .sw-menu-overlay-col-media { grid-column: 3; }

/* The row's two blocks line up with the columns above them: the
   socials hold the plate's 170px track, and the legal links take
   the rest, which puts them under the Menu links. Without this
   the flex would pack both against the left edge and the legal
   block would sit mid-plate.

   The row's own gap (2.5rem, menu.css) sits BETWEEN the two, so
   the socials track is short by that much for the legal block to
   start exactly on the Menu column's edge - hence the basis
   below is the plate's width and the gap is absorbed by the
   row's gap rather than added to it. */
.sw-menu .sw-menu-overlay-row {
  /* flex-end aligned the two blocks by their BOTTOM edges, and
     they are different heights (51px against 46px), so their
     headers started on different lines - measured 5px apart.
     Aligning to the top starts both headers on one line, which
     is what makes the row read as a single line across the
     panel's foot. */
  align-items: flex-start;
  /* The two tracks below already carry the column geometry, so
     the row's own inter-block gap is not wanted on top of it. */
  gap: 0;
}

.sw-menu .sw-menu-overlay-row .sw-reach {
  /* Exactly the plate column's width, so the two share an edge
     and the socials sit directly under the image. */
  flex: 0 0 170px;
  min-width: 0;
}

.sw-menu .sw-menu-overlay-row .sw-legal {
  /* Takes the slack. With the row's gap zeroed and the socials
     pinned to the plate's track, this starts exactly where the
     Menu column starts - the legal links land under the links
     they belong with. */
  flex: 1;
  min-width: 0;
  /* The grid's own column-gap separates this from the socials,
     so the block's text starts on the Menu column's left edge
     rather than hard against the plate's track. */
  padding-left: 56px;
}

/* The Menu column was one of two flex children and carried a 2.5
   ratio against the old link stack's 1.5. It is alone in that row
   now, so the ratio has nothing to divide against - it just fills
   the column the grid gives it. */
.sw-menu .sw-menu-overlay-col-lg {
  flex: 1;
}

.sw-menu .sw-menu-plate {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--sw-fg);
  /* The frame carries a fixed height now rather than flex:1, so
     there is nothing here for a flex:1 to resolve against - and
     leaving it on would stretch the link back down the column
     and undo that. The anchor wraps the frame tightly instead. */
  flex: none;
  min-height: 0;
}

/* Bevelled on all eight sides at the same 14px the showcase
   plates use (.sw-sc-frame, css/showcase.css) - which is itself
   the nav bar's and the showreel's cut. The menu's own media
   widget takes a single deep notch on one corner; that shape
   belongs to the widget, not to plates like this one, so this
   follows the page's images instead. */
.sw-menu .sw-menu-plate-frame {
  --sw-plate-notch: 14px;
  position: relative;
  overflow: hidden;
  background: var(--sw-bg);
  /* Fixed height rather than flex:1 with a 200px floor. That
     pair was written for a plate that filled a full-height
     column: flex:1 grew the frame to whatever the panel was
     tall, so shrinking the WIDTH alone left a tall, narrow
     image rather than a smaller one. A fixed height sizes the
     plate on its own terms, and the 3:4 it works out to at
     170px keeps the crop upright like the widget opposite. */
  flex: none;
  height: 225px;
  clip-path: polygon(
    var(--sw-plate-notch) 0,
    calc(100% - var(--sw-plate-notch)) 0,
    100% var(--sw-plate-notch),
    100% calc(100% - var(--sw-plate-notch)),
    calc(100% - var(--sw-plate-notch)) 100%,
    var(--sw-plate-notch) 100%,
    0 calc(100% - var(--sw-plate-notch)),
    0 var(--sw-plate-notch)
  );
}

.sw-menu .sw-menu-plate-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Settles back on hover-out at the same pace the panel's other
     transitions run. */
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
  .sw-menu .sw-menu-plate:hover .sw-menu-plate-img {
    transform: scale(1.04);
  }
}

} /* ===== end WIDE ONLY (min-width: 1001px) ===== */

/* Motion preference applies at every width, so it sits outside
   the wide-only block above. */
@media (prefers-reduced-motion: reduce) {
  .sw-menu .sw-menu-plate-img {
    transition: none;
  }

  .sw-menu .sw-menu-plate:hover .sw-menu-plate-img {
    transform: none;
  }
}

/* --------------------------------------------------------
   Mobile - the columns stack, so the plate cannot hold a
   200px floor or the panel would need to scroll. It gets the
   same height-driven treatment the widget gets at this width,
   one step shorter: two images stacked is a lot of panel, and
   the rotating one is the one worth the space.
   -------------------------------------------------------- */
@media (max-width: 768px) {
  .sw-menu .sw-menu-overlay-col-plate {
    /* Runs last of the three: image widget, links, then this.
       The widget is order 1 and the Menu column order 2 in
       menu.css, so this continues the sequence. */
    order: 3;
    flex-shrink: 0;
    gap: 1rem;
  }

  .sw-menu .sw-menu-plate-frame {
    min-height: 0;
    flex: 0 1 auto;
    height: clamp(96px, 18vh, 150px);
    height: clamp(96px, 18svh, 150px);
  }
}

@media (max-width: 768px) and (max-height: 700px) {
  /* Short phone: the panel is already tight before this plate is
     counted, so it drops out rather than forcing a scroll. The
     rotating widget above still carries the imagery. */
  .sw-menu .sw-menu-overlay-col-plate {
    display: none;
  }
}