/* PR #6 fix group 1: overlay rules for this group's pages only (loaded after public-refresh.css and public-refresh-pr6-fixes.css). */
/* Pages: /apis, /apis/reseller-api, /apis/global-resolution-api, /apis/mirroring-api.
 * Markup counterpart: src/lib/public-refresh/pr6-groups/g1.ts (marks the one card image to show).
 * Presentation only; no stored copy, link or form is hidden. */

/* ---------------------------------------------------------------------------------------
 * 1. Feature cards ("Who is it For?", "Key Benefits"), as live: the two cards side by side
 *    on desktop, each with its copy on the left and its portrait picture on the right, whole,
 *    standing on the card's bottom edge. Owner review 24 Sep: full-width 1296px rows left the
 *    copy on the far left and the picture pinned far right with an empty band between them.
 *    Below 1024px the cards stack; a card narrower than 540px puts its picture under the copy.
 * ------------------------------------------------------------------------------------- */
.fn-refreshed-page .fn-box-container {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
}
@media (min-width: 1024px) {
  .fn-refreshed-page .fn-box-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
.fn-refreshed-page .fn-box-2-col {
  container-type: inline-size;
}
.fn-refreshed-page .web3-sec-tld-banner {
  min-height: 0 !important;
  height: 100%;
  padding: 40px 40px 0 !important;
}
.fn-refreshed-page .web3-sec-tld-banner:not(:has(.fn-g1-pick)) {
  padding-bottom: 40px !important;
}
.fn-refreshed-page .web3-sec-tld-content {
  max-width: none !important;
  width: 100%;
}
.fn-refreshed-page .web3-sec-tld-banner .desc-wrapper {
  max-width: none !important;
  width: auto !important;
}
.fn-refreshed-page .web3-sec-tld-banner .desc-wrapper p {
  max-width: 62ch;
}
.fn-refreshed-page .web3-sec-tld-banner .desc-wrapper .pwr-cta_button {
  margin-top: 24px !important;
}
/* One picture per card (g1.ts marks it); the other variant is a duplicate for the old theme.
 * The whole alternative (fn-g1-alt) only replaces a cut product shot on stacked cards. */
.fn-refreshed-page .web3-tld-image-r:not(.fn-g1-pick),
.fn-refreshed-page .web3-tld-image-r.desktop-only:not(.fn-g1-pick),
.fn-refreshed-page .web3-tld-image-r.mobile-only:not(.fn-g1-pick),
.fn-refreshed-page .web3-tld-image-r.fn-g1-alt {
  display: none !important;
}
.fn-refreshed-page .web3-tld-image-r.fn-g1-pick,
.fn-refreshed-page .web3-tld-image-r.desktop-only.fn-g1-pick,
.fn-refreshed-page .web3-tld-image-r.mobile-only.fn-g1-pick {
  position: static !important;
  display: flex !important;
  width: 100% !important;
  height: auto !important;
  margin: auto 0 0 !important;
  padding-top: 24px;
  align-items: flex-end;
  justify-content: center;
}
.fn-refreshed-page .web3-tld-image-r img {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 300px !important;
  object-fit: contain !important;
  object-position: bottom center;
}
/* Wide enough card: copy | picture. The portrait art carries a transparent margin on its left
 * (about a fifth of the file), so the picture is drawn 125% of its 34% column and that margin
 * runs under the copy's column end, as on live: the copy keeps one line per item and the
 * visible figure starts at the column. The picture stands on the bottom edge; both headings
 * start at the top of their card. */
@container (min-width: 540px) {
  .fn-refreshed-page .web3-sec-tld-banner:has(> .fn-g1-pick) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 34%);
    column-gap: 16px;
    align-items: stretch !important;
  }
  .fn-refreshed-page .web3-sec-tld-banner:has(> .fn-g1-pick) > .web3-sec-tld-content {
    grid-column: 1;
    grid-row: 1;
    padding-bottom: 40px;
    justify-content: flex-start;
    z-index: 1;
  }
  .fn-refreshed-page .web3-sec-tld-banner > .web3-tld-image-r.fn-g1-pick {
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
    padding-top: 24px;
    align-self: end;
    justify-content: flex-end;
  }
  .fn-refreshed-page .web3-tld-image-r.fn-g1-pick img {
    flex: none;
    width: 125% !important;
    max-width: none !important;
    max-height: none !important;
  }
}
/* Stacked card (phones, and the two-column row between 1024 and ~1200px): the picture under
 * the copy; a cut product shot gives way to its whole stored alternative when there is one. */
@container (max-width: 539px) {
  .fn-refreshed-page .web3-sec-tld-banner > .web3-tld-image-r.fn-g1-alt {
    position: static !important;
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    margin: auto 0 0 !important;
    padding-top: 8px;
    align-items: flex-end;
    justify-content: center;
  }
  .fn-refreshed-page .web3-sec-tld-banner:has(> .fn-g1-alt) > .fn-g1-pick {
    display: none !important;
  }
  .fn-refreshed-page .web3-sec-tld-banner.web3-sec-tld-banner:has(> .fn-g1-alt) {
    padding-right: 24px !important;
  }
}

/* Art whose file ends in a hard cut at its right edge runs to the card border, as live shows
 * it: the card drops its right padding (the copy keeps it), so the cut is the card's edge. */
.fn-refreshed-page .web3-sec-tld-banner:has(> .fn-g1-bleed-right) {
  padding-right: 0 !important;
}
.fn-refreshed-page .web3-sec-tld-banner:has(> .fn-g1-bleed-right) > .web3-sec-tld-content {
  padding-right: 40px;
}
.fn-refreshed-page .web3-tld-image-r.fn-g1-pick.fn-g1-bleed-right {
  justify-content: flex-end !important;
}
.fn-refreshed-page .fn-g1-bleed-right img {
  object-position: bottom right !important;
}

/* ---------------------------------------------------------------------------------------
 * 2. One button: yellow, dark label, 52px, never wraps.
 * ------------------------------------------------------------------------------------- */
.fn-refreshed-page .pwr-cta_button,
.fn-refreshed-page .cta_button,
.fn-refreshed-page .dev-cta-button {
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 24px !important;
  white-space: nowrap !important;
  gap: 12px !important;
  line-height: 1.2 !important;
}
/* A card's button stays inside the card. "Migrate Domain to Web3 Domain" (309px) lost about 8px at
 * the edge of its 327px card at 375px, more at 320 and 360 (visual QA, 9 Oct 2026): a nowrap
 * label in a flex item of the card, which never shrank below the label. A label longer than the
 * card now wraps, centred, as HubSpot wrapped it on phones, and the button grows with it; a label
 * that fits keeps the one-line 52px button. */
.fn-refreshed-page .pwr-adc__content-wrapper .pwr-adc-content--button :is(.cta_button, .pwr-cta_button) {
  white-space: normal !important;
  height: auto !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  text-align: center;
}
.fn-refreshed-page .pwr-cta_button i,
.fn-refreshed-page .pwr-cta_button svg {
  flex: none;
}

/* ---------------------------------------------------------------------------------------
 * 3. Case studies and the /apis bento: on the 1296px content edge like every other block
 *    (the module kept a 40px inner inset, 16px on phones), copy starts at the top of the card
 *    (the shared overlay centred the tall first card, leaving ~160px empty above its title).
 * ------------------------------------------------------------------------------------- */
.fn-refreshed-page .pwr-adc-main,
.fn-refreshed-page .pwr-bento-grid.pwr-adc .pwr-adc-main {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: none !important;
}
.fn-refreshed-page .pwr-adc__content-wrapper,
.fn-refreshed-page
  .pwr-bento-grid
  .pwr-adc__content-wrappers:has(> [data-index]:nth-child(3):last-child)
  > [data-index]:first-child {
  justify-content: flex-start !important;
}
/* The tall spanning card of the /apis bento: its free space goes around the picture (the
 * picture keeps its natural size, never upscaled), copy and button close the card. */
.fn-refreshed-page
  .pwr-bento-grid
  .pwr-adc__content-wrappers:has(> [data-index]:nth-child(3):last-child)
  > [data-index]:first-child
  .pwr-adc-content--image {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 16px 0 !important;
}
/* Card headings sit one step above their copy (the stored inline margin was 50px). */
.fn-refreshed-page .pwr-bento-grid .pwr-adc-content--title {
  margin-bottom: 20px !important;
}

/* A card ends at its padding: no stored bottom margin after the last block. */
.fn-refreshed-page .pwr-adc__content-wrapper > :last-child,
.fn-refreshed-page .pwr-adc__content-wrapper > :last-child .pwr-adc-content__text > :last-child {
  margin-bottom: 0 !important;
}

/* The old editor left white highlight boxes (inline background-color) on card copy. */
.fn-refreshed-page :is(.pwr-adc-content__text, .web3-sec-tld-banner, .pwr-rich-text) [style*="background"] {
  background: none !important;
}

/* ---------------------------------------------------------------------------------------
 * Global Resolution API, Case Studies: the "Metamask" card is a title plus one picture, and
 * that picture is itself the purple MetaMask tile (a flat JPG, not a transparent logo). The
 * shared bento rule in public-refresh-pr6-fixes.css (max-height 240px, width auto) drew it as
 * a 278x240 box on the left half of a 636px card, with the right half and the bottom empty.
 * As on live, the tile fills the card's content width; on two-column widths it also takes the
 * card's remaining height so both case-study cards end together (two columns from 901px;
 * object-fit: cover only trims flat purple margin, the centred logo stays whole). Stacked (up to 900px): full width, at
 * most 280px tall. A card that holds a title and a picture only matches no other API card.
 * ------------------------------------------------------------------------------------- */
.fn-refreshed-page
  .pwr-bento-grid
  .pwr-adc__content-wrapper:has(> .pwr-adc-content--image):not(:has(> .pwr-adc-content--text)):not(:has(> .pwr-adc-content--button))
  .pwr-adc-content--image {
  flex: 1 1 auto;
  display: flex;
  width: 100%;
  margin: 0 !important;
}
.fn-refreshed-page
  .pwr-bento-grid
  .pwr-adc__content-wrapper:has(> .pwr-adc-content--image):not(:has(> .pwr-adc-content--text)):not(:has(> .pwr-adc-content--button))
  .pwr-adc-content__image-wrapper {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
}
.fn-refreshed-page
  .pwr-bento-grid
  .pwr-adc__content-wrapper:has(> .pwr-adc-content--image):not(:has(> .pwr-adc-content--text)):not(:has(> .pwr-adc-content--button))
  .pwr-adc-content--image
  img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 280px !important;
  object-fit: cover !important;
  object-position: center;
  margin: 0 !important;
  border-radius: 16px;
}
@media (min-width: 901px) {
  /* The tile takes the height the row gives the card (set by the copy card beside it) and
   * adds none of its own beyond a floor, so the two cards end together. */
  .fn-refreshed-page
    .pwr-bento-grid
    .pwr-adc__content-wrapper:has(> .pwr-adc-content--image):not(:has(> .pwr-adc-content--text)):not(:has(> .pwr-adc-content--button))
    .pwr-adc-content__image-wrapper {
    position: relative;
    min-height: 240px;
  }
  .fn-refreshed-page
    .pwr-bento-grid
    .pwr-adc__content-wrapper:has(> .pwr-adc-content--image):not(:has(> .pwr-adc-content--text)):not(:has(> .pwr-adc-content--button))
    .pwr-adc-content--image
    img {
    position: absolute;
    inset: 0;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center;
  }
}

/* ---------------------------------------------------------------------------------------
 * 4. Anchored headings land below the sticky 65px header.
 * ------------------------------------------------------------------------------------- */
html:has(main.fn-refreshed-page) {
  scroll-padding-top: 88px;
}

/* ---------------------------------------------------------------------------------------
 * 5. Narrow screens.
 * ------------------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* The hero illustration follows the hero copy, before the feature cards (it came last). */
  .fn-refreshed-page .fn-refresh-hero:has(> .fn-hero-copy .fn-box-container) > .fn-hero-art {
    order: 1;
    margin-top: 32px;
  }
  .fn-refreshed-page .fn-refresh-hero:has(> .fn-hero-copy .fn-box-container) .dnd-column > .dnd-row:has(.fn-box-container) {
    order: 2;
  }
}
@media (max-width: 900px) {
  /* Case studies and bento: one card per row below 900px (two 308px columns squeezed the
   * copy to 4 words per line and left the shorter card half empty). */
  .fn-refreshed-page .pwr-bento-grid .pwr-adc__content-wrappers {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .fn-refreshed-page .pwr-bento-grid .pwr-adc__content-wrappers > [data-index] {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}
@media (max-width: 700px) {
  .fn-refreshed-page .web3-sec-tld-banner {
    padding: 24px 24px 0 !important;
  }
  .fn-refreshed-page .web3-sec-tld-banner:has(> .fn-g1-bleed-right) > .web3-sec-tld-content {
    padding-right: 24px;
  }
  .fn-refreshed-page .web3-sec-tld-banner:not(:has(.fn-g1-pick)) {
    padding-bottom: 24px !important;
  }
  .fn-refreshed-page .web3-tld-image-r img {
    max-height: 280px !important;
  }
  .fn-refreshed-page .pwr-adc__content-wrapper--padding {
    padding: 24px !important;
  }
}
@media (max-width: 600px) {
  /* Phone copy is never below 14px (owner rule), eyebrows and section labels included. */
  .fn-refreshed-page .fn-eyebrow,
  .fn-refreshed-page .pwr-sec__title-intro {
    font-size: 14px !important;
  }
  /* A button is as wide as its label, never a stretched two-line bar. */
  .fn-refreshed-page .pwr-cta_button {
    width: auto !important;
    max-width: 100%;
    padding: 0 20px !important;
  }
}

/* ---------------------------------------------------------------------------------------
 * /apis tab cards (owner review r4, 24 Sep): Reseller API, Global Resolution API and Mirroring
 * API each show a product dashboard in their tall card. The shared bento cap (max-height 240px)
 * drew it 316 to 367px wide in a 570px content box, centred in the card's free space, so a ~90px
 * gap opened under the title. As on live: the picture spans the card's content width (never
 * past its own pixels: width auto, max-width 100%), whole, one heading step (20px) under the
 * title; the copy and the button follow it and any free space stays below the button.
 * The API sub-pages keep the shared rule (their card art is a small logo).
 * ------------------------------------------------------------------------------------- */
html body.fn-public-refresh main.fn-refreshed-page .pwr-bento-grid.fn-g1-api-tabs.fn-g1-api-tabs .pwr-adc__content-wrappers > [data-index]:has(> .pwr-adc-content--text) > .pwr-adc-content--image {
  flex: none !important;
  display: block !important;
  width: 100%;
  margin: 0 0 24px !important;
}
html body.fn-public-refresh main.fn-refreshed-page .pwr-bento-grid.fn-g1-api-tabs.fn-g1-api-tabs .pwr-adc__content-wrappers > [data-index]:has(> .pwr-adc-content--text) > .pwr-adc-content--image .pwr-adc-content__image-wrapper {
  display: block !important;
  height: auto !important;
  margin: 0 !important;
}
html body.fn-public-refresh main.fn-refreshed-page .pwr-bento-grid.fn-g1-api-tabs.fn-g1-api-tabs .pwr-adc__content-wrappers > [data-index]:has(> .pwr-adc-content--text) > .pwr-adc-content--image img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
}