/* PR #6 fix group 2: overlay rules for this group's pages only (loaded after public-refresh.css and public-refresh-pr6-fixes.css).
 *
 * Pages: /domains/premium-tlds, /partnerships, /careers, /tld-trademark, /multichain. This sheet
 * is only linked on those five pages, so an unscoped `.fn-refreshed-page` rule here reaches
 * them and nothing else; `.fn-g2-<page>` (added to every section by pr6-groups/g2.ts) targets
 * one page. Presentation only. Every rule is pinned by tests/int/public-refresh-g2.int.spec.ts
 * and logged, with before/after screenshots, in .review/g2/G2-DEFECT-LOG.md.
 */

/* ---------------------------------------------------------------------------------------
 * 1. Group-wide.
 * ------------------------------------------------------------------------------------- */
/* One button: 52px tall. The shared overlay pads 15px + a 20px icon line, which made every
 * button with an icon 56px and the rest 51 to 52px. */
.fn-refreshed-page .pwr-cta_button,
.fn-refreshed-page .cta_button,
.fn-refreshed-page .fn-search-btn {
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 52px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.2 !important;
}
.fn-refreshed-page .pwr-cta_button .ph,
.fn-refreshed-page .cta_button .ph,
.fn-refreshed-page .pwr-cta_button i,
.fn-refreshed-page .cta_button i {
  font-size: 20px !important;
  line-height: 1 !important;
}

/* The legacy `.page-center` keeps a 16px (phone) / 40px (tablet) side margin inside the
 * section gutter, so text modules and card grids started at 40px instead of the 24px gutter. */
.fn-refreshed-page .dnd-section .page-center {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
}

/* The shared overlay hides <br> in step titles, which glued "Real<br>Impact" into "RealImpact".
 * The lead-in span that ends in a <br> keeps a word space instead. */
.fn-refreshed-page .pwr-step__title .fw-400:has(> br:last-child) {
  margin-right: 0.28em;
}

/* No empty band between the hero and the first section: the hero's own bottom padding is
 * the gap (the section's 56px top padding on top of it made 124 to 200px holes). */
.fn-refreshed-page .fn-refresh-hero + .dnd-section,
.fn-refreshed-page .fn-refresh-hero + .fn-collapsed + .dnd-section {
  padding-top: 0 !important;
}

/* Shared G7 gives the cards row a 56px top margin, but its selector also matches the nested
 * row inside it, so the cards sat 112px (+ the button margin: 132px) under the hero button. */
/* (Doubled classes: the shared selector carries seven classes of specificity.) */
.fn-refreshed-page.fn-refreshed-page
  .fn-refresh-hero.fn-refresh-hero
  .dnd-row
  .dnd-column
  > .dnd-row.dnd-row:has(.pwr-sec-steps, .fn-box-container, .dev-box-container) {
  margin-top: 0 !important;
}

/* A hero whose cards were moved under the copy (shared G7): on a single column the
 * illustration belongs to the hero copy, above the cards, not after the last card. */
@media (max-width: 900px) {
  .fn-refreshed-page
    .fn-refresh-hero:has(> .fn-hero-copy :is(.pwr-sec-steps, .fn-box-container, .dev-box-container))
    .dnd-column
    > .dnd-row:has(.pwr-sec-steps, .fn-box-container, .dev-box-container) {
    order: 2;
    margin-top: 24px !important;
  }
  .fn-refreshed-page
    .fn-refresh-hero:has(> .fn-hero-copy :is(.pwr-sec-steps, .fn-box-container, .dev-box-container))
    > .fn-hero-art {
    order: 1;
    margin-top: 32px !important;
    margin-bottom: 0 !important;
  }
}

/* Phones: no copy under 14px (owner rule). The 12px uppercase eyebrow is a PR #6 token. */
@media (max-width: 600px) {
  .fn-refreshed-page .fn-eyebrow,
  .fn-refreshed-page .pwr-sec__title-intro {
    font-size: 14px !important;
  }
}

/* ---------------------------------------------------------------------------------------
 * 2. /domains/premium-tlds
 * ------------------------------------------------------------------------------------- */
/* The stored "hide on mobile" module rule hides the TLD grid below 768px. Owner decision
 * (24 Sep): keep it as on live, so no override here. */

/* The same stored module CSS hides `div:first-child` inside the module at <=768px, which
 * took the card icon (and on phones the whole grid) away. */
.fn-refreshed-page
  .fn-g2-premium-tlds
  .dnd-module:has(.fn-g2-tld-grid)
  div:first-child:not(.pwr-steps):not(.pwr-step) {
  display: block !important;
}

/* TLD sale card: one left edge. Icon tile on the left, name with the price right under it,
 * Buy Now on the card's content edge. Compact (about 190px instead of 286px). */
.fn-refreshed-page .fn-g2-tld-grid .pwr-step {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 20px;
  row-gap: 0;
  align-content: start;
  padding: 24px !important;
}
.fn-refreshed-page .fn-g2-tld-grid .pwr-step > .pwr-mh--wrapper:has(.pwr-step__img) {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
}
.fn-refreshed-page .fn-g2-tld-grid .pwr-step__img {
  display: block !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 16px !important;
  background: #fff;
  border: 1px solid var(--fn-line);
  object-fit: contain;
}
.fn-refreshed-page .fn-g2-tld-grid .pwr-step > .pwr-mh--wrapper:has(.pwr-step__title) {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}
.fn-refreshed-page .fn-g2-tld-grid .pwr-step__title {
  margin: 0 !important;
  overflow-wrap: anywhere;
}
.fn-refreshed-page .fn-g2-tld-grid .pwr-step__desc {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  display: block !important;
  width: auto !important;
  margin: 4px 0 0 !important;
}
.fn-refreshed-page .fn-g2-tld-grid .pwr-step__desc,
.fn-refreshed-page .fn-g2-tld-grid .pwr-step__desc * {
  font-size: 17px !important;
  line-height: 1.4 !important;
}
.fn-refreshed-page .fn-g2-tld-grid .pwr-step__desc br {
  display: none;
}
.fn-refreshed-page .fn-g2-tld-grid .pwr-step > .pwr-mh--wrapper:has(.pwr-step__cta) {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 20px !important;
  padding-top: 0 !important;
}

/* Hero search: the refreshed search bar (same look as the domain pages), 52px field and
 * button, no stray 40px wrapper padding. The results slot is empty (its script is not in
 * the CMS) and only added a blank line under the bar. */
.fn-refreshed-page .fn-g2-premium-tlds .fn-search-wrapper {
  margin: 28px 0 0 !important;
  padding: 0 !important;
  max-width: 560px !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.fn-refreshed-page .fn-g2-premium-tlds .fn-search-bar {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 6px !important;
  background: #fff !important;
  border: 1px solid var(--fn-line) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
.fn-refreshed-page .fn-g2-premium-tlds .fn-search-bar:focus-within {
  border-color: var(--fn-purple) !important;
}
.fn-refreshed-page .fn-g2-premium-tlds #fnSearchInput {
  flex: 1;
  min-width: 0;
  box-sizing: border-box !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--fn-ink) !important;
  font:
    400 16px/1.5 Instrument,
    Arial,
    sans-serif !important;
}
.fn-refreshed-page .fn-g2-premium-tlds #fnSearchInput::placeholder {
  color: var(--fn-muted);
  opacity: 1;
}
.fn-refreshed-page .fn-g2-premium-tlds .fn-search-btn {
  flex: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 24px !important;
  background: var(--fn-yellow) !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  color: var(--fn-ink) !important;
  font:
    650 15px/1.2 Instrument,
    Arial,
    sans-serif !important;
  cursor: pointer;
}
.fn-refreshed-page .fn-g2-premium-tlds .fn-g2-empty {
  display: none !important;
}
@media (max-width: 600px) {
  .fn-refreshed-page .fn-g2-premium-tlds .fn-search-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .fn-refreshed-page .fn-g2-premium-tlds #fnSearchInput {
    flex: none;
    width: 100%;
  }
  .fn-refreshed-page .fn-g2-premium-tlds .fn-search-btn {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------------------
 * 3. /partnerships
 * ------------------------------------------------------------------------------------- */
/* Card content starts at the top (the stored "vertical middle" left a big empty top above
 * "Tech Support" and "Partnership"). One padding on every width. */
.fn-refreshed-page .fn-g2-partnerships .pwr-adc__content-wrapper {
  justify-content: flex-start !important;
  padding: 40px !important;
}
/* Program photos, as on live: the photo is large and natural in the card, never a small picture
 * in a white media tile (owner, 24 Sep evening: "bu box boyutu ne"). It takes the full content
 * width under the heading, text under it, whole (never cropped or stretched). The two stored
 * edge-to-edge photos (Tech Support, Partnership: the module's own margin-left:-40px and
 * width:calc(100% + 80px)) keep bleeding to the card edges as on live, and the card's rounded
 * corners clip them. The Marketing picture has its own grey ground, so it gets rounded corners;
 * the others are transparent cut-outs that sit straight on the card colour. */
.fn-refreshed-page .fn-g2-partnerships .pwr-adc__content-wrapper:has(.pwr-adc-content--image) {
  overflow: hidden !important;
}
.fn-refreshed-page .fn-g2-partnerships .pwr-adc-content--image {
  flex: none;
  display: block;
  margin: 24px 0 !important;
}
.fn-refreshed-page .fn-g2-partnerships .pwr-adc-content__image-wrapper {
  display: block !important;
  box-sizing: border-box;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.fn-refreshed-page .fn-g2-partnerships .pwr-adc-content__image-wrapper[style*='margin-left: -40px'] {
  margin-left: -40px !important;
  width: calc(100% + 80px) !important;
  max-width: none !important;
}
.fn-refreshed-page .fn-g2-partnerships .pwr-adc-content__image-wrapper img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  border-radius: 16px;
}
.fn-refreshed-page .fn-g2-partnerships .pwr-adc-content__image-wrapper[style*='margin-left: -40px'] img {
  border-radius: 0;
}
.fn-refreshed-page .fn-g2-partnerships .pwr-adc-content--title {
  margin-top: 0 !important;
}
@media (max-width: 700px) {
  .fn-refreshed-page .fn-g2-partnerships .pwr-adc__content-wrapper {
    padding: 24px !important;
  }
  .fn-refreshed-page .fn-g2-partnerships .pwr-adc-content__image-wrapper[style*='margin-left: -40px'] {
    margin-left: -24px !important;
    width: calc(100% + 48px) !important;
  }
}

/* ---------------------------------------------------------------------------------------
 * 4. /careers
 * ------------------------------------------------------------------------------------- */
/* "About the role" and "Responsibilities" side by side were 308px wide at 768 (the list was
 * clipped at the card edge in the QA run): one column below 1000px. */
@media (max-width: 999px) {
  .fn-refreshed-page .fn-g2-careers .pwr-bento-grid .pwr-adc__content-wrappers {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .fn-refreshed-page .fn-g2-careers .pwr-bento-grid .pwr-adc__content-wrappers > [data-index] {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* "No Match? No Problem.": the stored text module is centred (pwr--align-c) and so is the
 * stored button module under it (pwr-mini-cta--align-c), but the button sat at the far left
 * (owner, 24 Sep evening). A centred button row under a centred text block is centred, and the
 * paragraph stays centred on phones and tablets too (it fell back to left below 1000px while
 * its heading stayed centred). */
/* (The hero is a centred module too, but the redesign sets hero copy on the left: not touched.) */
.fn-refreshed-page .fn-g2-careers:not(.fn-refresh-hero) .pwr-sec-txt.pwr--align-c .pwr-rich-text,
.fn-refreshed-page .fn-g2-careers:not(.fn-refresh-hero) .pwr-sec-txt.pwr--align-c .pwr-rich-text p {
  text-align: center !important;
}
.fn-refreshed-page
  .fn-g2-careers:not(.fn-refresh-hero)
  .dnd-row:has(.pwr-sec-txt.pwr--align-c)
  + .dnd-row
  :is(.pwr-mini-cta--align-c, .pwr-mini-cta--align-c > .pwr-cta) {
  text-align: center !important;
}

/* ---------------------------------------------------------------------------------------
 * 5. /tld-trademark
 * ------------------------------------------------------------------------------------- */
/* The description was held to ~186px beside the photo (2 to 3 words per line). */
.fn-refreshed-page .fn-g2-tld-trademark .web3-sec-tld-banner .desc-wrapper {
  width: auto !important;
  max-width: none !important;
}
/* The photo stays inside the card's right padding (it was cut at the card edge). */
.fn-refreshed-page .fn-g2-tld-trademark .web3-tld-image-r {
  right: 40px !important;
}
@media (max-width: 1000px) {
  .fn-refreshed-page .fn-g2-tld-trademark .web3-tld-image-r {
    right: 24px !important;
  }
}
@media (max-width: 700px) {
  .fn-refreshed-page .fn-g2-tld-trademark .web3-tld-image-r img {
    width: auto !important;
    max-width: 240px !important;
    max-height: 240px !important;
    margin-left: auto;
  }
}

/* ---------------------------------------------------------------------------------------
 * 6. Spacing between card blocks (all five pages, partnerships most visibly).
 * ------------------------------------------------------------------------------------- */
/* The legacy bento module pads itself 24px top and bottom inside a section that already has
 * 56px: 160px between two program blocks on /partnerships. The section owns the rhythm. */
.fn-refreshed-page .pwr-bento-grid {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* The four partner programs (the stored tab panels, all visible because the tab script is not
 * in the CMS) read as one list: 56px between programs, 24px inside one. */
.fn-refreshed-page .fn-g2-partnerships.dnd-section:has(.pwr-bento-grid) + .dnd-section:has(.pwr-bento-grid) {
  padding-top: 0 !important;
}

/* A button row under a text row in the same section sits one clear step below it ("Submit
 * Application" touched its paragraph on /careers); the stored 100px bottom margin is dropped
 * because the section owns the bottom spacing. */
.fn-refreshed-page .fn-refresh-section .dnd-row + .dnd-row .pwr-mini-cta {
  margin-top: 28px !important;
}
.fn-refreshed-page .fn-refresh-section .pwr-mini-cta {
  margin-bottom: 0 !important;
}

/* Step card descriptions: the legacy theme shrinks the description to its text and centres it
 * (margin auto), so short lines sat 5 to 34px right of the title (/multichain chain cards,
 * the premium price). One left edge. */
.fn-refreshed-page .pwr-step__desc {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* /partnerships below 1000px: one program card per row (two 283px columns squeezed the photo
 * card into a narrow column). */
@media (max-width: 999px) {
  .fn-refreshed-page .fn-g2-partnerships .pwr-bento-grid .pwr-adc__content-wrappers {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .fn-refreshed-page .fn-g2-partnerships .pwr-bento-grid .pwr-adc__content-wrappers > [data-index] {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* Three cards on a two-column grid (701 to 1000px) left the third card alone on a half-empty
 * row: it spans the row instead. */
@media (min-width: 701px) and (max-width: 1000px) {
  .fn-refreshed-page .pwr-steps > .pwr-step:nth-child(3):last-child,
  .fn-refreshed-page .grid-container > :nth-child(3):last-child {
    grid-column: 1 / -1;
  }
}