/* ═══════════════════════════════════════════════════════════════════════════
   RESELLER INTENT CARDS — THICK GLASS FRAME
   ───────────────────────────────────────────────────────────────────────────
   Added 11 Aug 2026.

   WHAT THIS DOES
   The two cards under the "For resellers" heading on the Client Type step
   ("Growing my own business with GoGorilla.com" and "White-labelling
   GoGorilla.com services to my clients") ship with .thin-glass-frame in
   sections.v2.jsx, which paints the 8-slice WebP bevel at 14px. That thin
   variant exists for nested secondary surfaces. These two are primary
   choices sitting directly under the client-type cards, so they get the
   standard 22px bevel instead.

   WHY A SEPARATE FILE INSTEAD OF SWAPPING THE CLASSNAME
   The obvious fix is thin-glass-frame -> glass-frame in sections.v2.jsx.
   That file is roughly 1MB and COLLABORATION.md records it being silently
   truncated four times by whole-file writes. A standalone stylesheet gets
   the identical pixels with no risk to that file, and cannot collide with
   anyone else's in-flight edits. If sections.v2.jsx is ever opened for this
   properly, swap the class there and delete this file plus its <link>.

   WHY THE :not() SCOPE
   The investor cards reuse .agency-intent-card inside
   .agency-intent-section.investor-intent-section and must keep the thin
   bevel. .investor-intent-section is already the discriminator used by the
   scroll-target ternary in sections.v2.jsx, so this follows the existing
   convention rather than inventing a new hook.

   LOAD ORDER
   Linked after sprint2.css in index.html, so it is last in the cascade.
   Selectors are still written to out-specify .gg-scope .thin-glass-frame
   (0,2,1) on their own, so a future re-order will not silently undo this.

   PATHS
   Slice URLs are relative to this file. It lives in assets/ alongside
   app.v2.css, so glass-frame/*.webp resolves exactly as it does there.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Corner radius. app.v2.css hardcodes 10px on .agency-intent-card, a value
   tuned for the 14px slices. The glass-frame card family sits at 18px, held
   in --global-card-component-border-radius (assets/tokens.css, currently on
   feat/global-card-border-radius-token). That token is not on main yet, so
   the 18px fallback is what renders today; the moment the token branch lands
   this starts tracking it with no further edit here.

   border-radius: inherit on the ::before below means the overlay follows this
   automatically, and :hover / .agency-intent-card--on set border-colour and
   box-shadow only, so one declaration covers every state. */
.gg-scope .agency-intent-section:not(.investor-intent-section) .agency-intent-card{
  border-radius: var(--global-card-component-border-radius, 18px);
}

/* The bevel itself, repainted at 22px. Same eight WebP slices and the same
   multiply blend as .glass-frame in app.v2.css, just reached through the
   .thin-glass-frame class the markup already carries. Keep the two in step:
   if .glass-frame changes in app.v2.css, mirror it here. */
.gg-scope .agency-intent-section:not(.investor-intent-section) .agency-intent-card.thin-glass-frame::before{
  background:
    url('glass-frame/top-left.webp')     top left     / 22px 22px no-repeat,
    url('glass-frame/top-right.webp')    top right    / 22px 22px no-repeat,
    url('glass-frame/bottom-left.webp')  bottom left  / 22px 22px no-repeat,
    url('glass-frame/bottom-right.webp') bottom right / 22px 22px no-repeat,
    url('glass-frame/top.webp')    22px top    / calc(100% - 44px) 22px repeat-x,
    url('glass-frame/bottom.webp') 22px bottom / calc(100% - 44px) 22px repeat-x,
    url('glass-frame/left.webp')   left 22px   / 22px calc(100% - 44px) repeat-y,
    url('glass-frame/right.webp')  right 22px  / 22px calc(100% - 44px) repeat-y;
}

/* A 22px corner slice needs 44px of card to land in. Below that the four
   corners overlap and the edges get a negative repeat length, which paints as
   a torn frame. The narrowest these cards get is the 720px breakpoint in
   app.v2.css, where they are still full-width in a single column and far
   wider than 44px, so this is belt and braces for very narrow embeds and for
   any future change to the grid. */
@media (max-width: 320px){
  .gg-scope .agency-intent-section:not(.investor-intent-section) .agency-intent-card.thin-glass-frame::before{
    background:
      url('glass-frame/top-left.webp')     top left     / 14px 14px no-repeat,
      url('glass-frame/top-right.webp')    top right    / 14px 14px no-repeat,
      url('glass-frame/bottom-left.webp')  bottom left  / 14px 14px no-repeat,
      url('glass-frame/bottom-right.webp') bottom right / 14px 14px no-repeat,
      url('glass-frame/top.webp')    14px top    / calc(100% - 28px) 14px repeat-x,
      url('glass-frame/bottom.webp') 14px bottom / calc(100% - 28px) 14px repeat-x,
      url('glass-frame/left.webp')   left 14px   / 14px calc(100% - 28px) repeat-y,
      url('glass-frame/right.webp')  right 14px  / 14px calc(100% - 28px) repeat-y;
  }
}