/* Offers directory v2. Design is scoped so article/homepage cards remain unchanged. */
.auin-offers-page { background: #f7faff; }
.auin-offers-page .auin-shell { max-width: 1600px; width: calc(100% - 56px); margin-inline: auto; }
.auin-offers-page .auin-offers-header {
  position: relative; padding: 20px 0 27px; overflow: hidden;
  border-bottom: 1px solid #e2eef9;
  background: linear-gradient(110deg, #f9fcff 23%, #eaf5ff 100%);
}
.auin-offers-page .auin-offers-header::after {
  content: ""; position: absolute; z-index: 0; right: 0; bottom: 0;
  width: min(57%, 720px); height: 178px;
  background: url("../illustrations/offers-sydney-skyline.svg") right bottom / contain no-repeat;
  opacity: .88; pointer-events: none;
}
.auin-offers-page .auin-offers-header > .auin-shell { position: relative; z-index: 1; align-items: center; }
.auin-offers-page .auin-offers-header h1 { font-size: clamp(2rem, 3.25vw, 3.3rem); font-weight: 900; }
.auin-offers-page .auin-offers-header p { max-width: 760px; font-size: clamp(.84rem, 1.1vw, 1rem); line-height: 1.8; }
.auin-offers-page .auin-route-content { padding-top: 18px; padding-bottom: 42px; }

/* Compact reward band, no pre-rendered reward numbers. */
.auin-offers-page .auin-offer-pool {
  display: grid; grid-template-columns: 115px minmax(210px, 1.4fr) minmax(115px, .46fr) minmax(165px, .75fr) minmax(125px, .78fr);
  min-height: 150px; gap: 17px; align-items: center; padding: 16px 20px;
  border: 1px solid #cfe2fb; border-radius: 17px;
  background: linear-gradient(100deg, #f2faff 0%, #eaf5ff 52%, #f6fbff 100%);
  box-shadow: 0 10px 22px rgba(21,62,107,.05);
}
.auin-offers-page .auin-offer-pool__art {
  width: 115px; height: 115px; align-self: center; display: grid; place-items: center;
}
.auin-offers-page .auin-offer-pool__art svg { width: 100%; height: 100%; filter: drop-shadow(0 7px 7px rgba(14,70,136,.13)); }
.auin-offers-page .auin-offer-pool__total { display: block; margin: 0; min-width: 0; }
.auin-offers-page .auin-offer-pool__eyebrow { color: #122b50; font-size: .86rem; font-weight: 900; letter-spacing: 0; }
.auin-offers-page .auin-offer-pool__amount { display: flex; align-items: baseline; gap: 2px; margin: 0; }
.auin-offers-page .auin-offer-pool__amount small { color: #073d86; font-size: clamp(1.5rem,2.1vw,2.2rem); }
.auin-offers-page .auin-offer-pool__amount strong {
  color: #1369e7; font-size: clamp(2.7rem, 4.7vw, 4.7rem); font-weight: 950;
  line-height: 1.08; letter-spacing: -.06em; font-variant-numeric: tabular-nums lining-nums;
}
.auin-offers-page .auin-offer-pool__total p { margin: 5px 0 0; font-size: .69rem; line-height: 1.5; color: #67809c; }
.auin-offers-page .auin-offer-pool__metric {
  display: flex; align-items: center; min-width: 0; gap: 10px; padding-left: 16px;
  border-left: 1px solid #d5e6f7;
}
.auin-offers-page .auin-offer-pool__metric > span:last-child { min-width: 0; }
.auin-offers-page .auin-offer-pool__metric strong { font-size: clamp(1.15rem,1.4vw,1.5rem); }
.auin-offers-page .auin-offer-pool__metric small { font-size: .7rem; }
.auin-offers-page .auin-offer-pool__metric-icon { width: 39px; height: 39px; flex-basis: 39px; font-size: 1.25rem; font-weight: 900; }
.auin-offers-page .auin-offer-pool__metric-icon.is-gift { color: #7440f4; background: #eee8ff; }
.auin-offers-page .auin-offer-pool__metric-icon.is-calendar { color: #e34f70; background: #ffedf1; }
.auin-offers-page .auin-offer-pool__tagline {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  min-height: 85px; padding: 10px 14px; transform: rotate(-3deg);
  background: #fff6cd; color: #142d4d; border-radius: 10px; text-align: center;
  font-size: clamp(.74rem,.88vw,.89rem); font-weight: 800; box-shadow: 0 6px 15px rgba(160,120,40,.08);
}
.auin-offers-page .auin-offer-pool__tagline strong { font-size: 1.06em; }

/* Preserve the original trust statements but keep them compact. */
.auin-offers-page .auin-offers-trust {
  margin: 12px 0 16px; padding: 8px 12px; border-radius: 11px; background: #f8fdfb;
}
.auin-offers-page .auin-offers-trust span { font-size: .7rem; }

/* Place category, sort and advanced filters above the full-width card grid. */
.auin-offers-page .auin-offers-layout { display: block; }
.auin-offers-page .auin-offers-main { display: block; }
.auin-offers-page .auin-offers-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 15px; position: relative; z-index: 5;
}
.auin-offers-page .auin-offer-category-tabs { flex: 1 1 auto; gap: 8px; }
.auin-offers-page .auin-offer-category-tabs a {
  padding: 10px 17px; border-radius: 12px; border: 0; background: #eef3f9; color: #314963;
}
.auin-offers-page .auin-offer-category-tabs a[aria-current="page"] { background: #0a478f; color: #fff; }
.auin-offers-page .auin-offers-sort {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid #e0e9f2;
  border-radius: 11px; background: #fff; color: #173454; font-size: .77rem; font-weight: 800;
}
.auin-offers-page .auin-offers-sort select {
  min-width: 112px; max-width: 190px; border: none; background: #fff; color: #173454; padding: 5px;
}
.auin-offers-page .auin-offers-sort button {
  padding: 5px 8px; border: 0; border-radius: 6px; color: #fff; background: #0a478f; font-size: .72rem; cursor: pointer;
}
.auin-offers-page .auin-offer-filter-card {
  position: relative; width: auto; padding: 0 !important; flex: 0 0 auto; box-shadow: none; border: 0;
  background: transparent;
}
.auin-offers-page .auin-offer-filter-card > summary {
  min-height: 38px; padding: 8px 12px; display: flex; gap: 7px; align-items: center;
  border: 1px solid #dfe8f3; border-radius: 10px; background: #fff; cursor: pointer; font-size: .78rem;
}
.auin-offers-page .auin-offer-filter-card > summary span { display: none; }
.auin-offers-page .auin-offer-filter-card > form {
  position: absolute; z-index: 20; top: calc(100% + 7px); right: 0; width: min(310px, 90vw);
  padding: 16px; border: 1px solid #dde7f1; border-radius: 12px; background: #fff;
  box-shadow: 0 15px 35px rgba(18,47,76,.17);
}
.auin-offers-page .auin-offer-filter-card:not([open]) > form { display: none; }
.auin-offers-page .auin-offer-filter-card form .auin-button { background: #084b99; border-color: #084b99; }

/* Responsive cards with every managed content field and disclosure intact. */
.auin-offers-page .auin-offer-list {
  /* Open disclosures must grow their own card, not stretch every sibling or overlap buttons. */
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 15px;
}
.auin-offers-page .auin-offer-card {
  --offer-color: #1263e4;
  display: grid; grid-template-columns: 73px minmax(0, 1fr);
  grid-template-areas: "logo main" "value value" "expiry expiry" "actions actions" "institution institution";
  /* Intrinsic rows make an expanded <details> occupy real space.
     minmax(0, 1fr) previously allowed the CTA row to collapse underneath it. */
  grid-template-rows: repeat(5, max-content);
  align-items: start; align-content: start; align-self: start;
  gap: 13px 10px; padding: 17px 15px 12px;
  min-width: 0; height: auto; border: 1px solid #e5ecf4; border-radius: 16px;
  background: #fff; box-shadow: 0 6px 20px rgba(31,67,112,.06);
}
.auin-offers-page .auin-offer-card--featured {
  border-color: #f4b939; background: linear-gradient(145deg, #fffdf5 0%, #fff 42%);
}
.auin-offers-page .auin-offer-card--featured::before {
  content: "★ 推荐"; position: absolute; left: 49px; top: 0; padding: 4px 8px;
  background: #ffb400; color: #fff; font-size: .67rem; font-weight: 850; border-radius: 0 0 8px 8px;
}
.auin-offers-page .auin-offer-rank {
  position: absolute; top: 12px; left: 12px; width: 26px; height: 26px; z-index: 2;
  background: #b8c5d5; color: #fff;
}
.auin-offers-page .auin-offer-logo {
  grid-area: logo; width: 67px; height: 67px; margin-top: 32px;
  border-radius: 13px; border: 0; background: #fff; overflow: hidden;
}
.auin-offers-page .auin-offer-logo.is-tiger { background: #ffdc00; border: 2px solid #f5c400; border-radius: 50%; }
.auin-offers-page .auin-offer-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.auin-offers-page .auin-offer-main { grid-area: main; margin-top: 12px; min-width: 0; }
.auin-offers-page .auin-offer-main header { flex-wrap: wrap; gap: 5px; }
.auin-offers-page .auin-offer-main h2 { font-size: clamp(.95rem, 1.06vw, 1.12rem); line-height: 1.4; overflow-wrap: anywhere; }
.auin-offers-page .auin-offer-main p { margin: 6px 0 8px; font-size: .74rem; line-height: 1.55; color: #61758b; }
.auin-offers-page .auin-offer-tags { gap: 5px; }
.auin-offers-page .auin-offer-tags span { padding: 3px 7px; font-size: .66rem; border-radius: 7px; }
.auin-offers-page .auin-offer-badge.is-hot { color: #ed6412; background: #fff1e5; }

/* Amount is always data-backed, but provider colors distinguish the cards. */
.auin-offers-page .auin-offer-card[data-auin-provider="Tiger Brokers"] { --offer-color: #f46b0d; }
.auin-offers-page .auin-offer-card[data-auin-provider="ING"] { --offer-color: #f36c05; }
.auin-offers-page .auin-offer-card[data-auin-provider="ubank"] { --offer-color: #631ce9; }
.auin-offers-page .auin-offer-card[data-auin-provider="Uber Eats"] { --offer-color: #0b9966; }
.auin-offers-page .auin-offer-card[data-auin-provider="Revolut"] { --offer-color: #0b67dc; }
.auin-offers-page .auin-offer-value {
  grid-area: value; display: flex; flex-direction: column; gap: 5px;
  min-width: 0; padding: 6px 0 7px; margin-top: 3px; border: 0;
}
.auin-offers-page .auin-offer-value small { color: #1a344f; font-size: .72rem; font-weight: 900; }
.auin-offers-page .auin-offer-reward {
  color: var(--offer-color); font-size: clamp(2.3rem, 3.15vw, 3.6rem);
  line-height: 1.07; letter-spacing: -.045em; font-weight: 900; white-space: normal; overflow-wrap: anywhere;
}
.auin-offers-page .auin-offer-value span {
  font-size: .74rem; white-space: normal; color: #2b4d71;
  padding: 5px 9px; border-radius: 7px; background: #f3f7fc;
}
.auin-offers-page .auin-offer-expiry {
  grid-area: expiry; display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: flex-start; text-align: left; min-height: 0; gap: 4px 9px;
  padding: 10px 12px; border: 1px solid #f6e8e8; background: #fff6f6;
}
.auin-offers-page .auin-offer-expiry small { color: #687c93; }
.auin-offers-page .auin-offer-expiry strong { font-size: .79rem; color: #0a7a54; }
.auin-offers-page .auin-offer-expiry span { font-size: .7rem; color: #0a7a54; }
.auin-offers-page .auin-offer-expiry.is-ended,
.auin-offers-page .auin-offer-expiry.is-paused { background: #f5f7fa; border-color: #e7edf4; }
.auin-offers-page .auin-offer-actions {
  /* Buttons follow the expiry panel immediately; never sit in a collapsible row. */
  grid-area: actions; display: flex; flex-direction: column; justify-content: flex-start;
  gap: 7px; min-width: 0; margin-top: 0;
}
.auin-offers-page .auin-offer-actions .auin-button {
  width: 100%; min-height: 42px; padding: 9px 11px; border-radius: 9px;
  background: #fff; color: #084788; border: 1px solid #aac0d8; font-weight: 850; font-size: .78rem;
}
.auin-offers-page .auin-offer-actions .auin-button:hover { color: #fff; border-color: #0b5baa; background: #0b5baa; }
.auin-offers-page .auin-offer-actions .auin-button[rel~="sponsored"] {
  order: -1; color: #fff; background: linear-gradient(110deg,#0f5eac,#08448e); border-color: #08448e;
}
.auin-offers-page .auin-offer-actions .auin-button[rel~="sponsored"]:hover { background: #052e65; }
.auin-offers-page .auin-offer-actions small { margin-top: 4px; color: #788aa0; font-size: .67rem; text-align: left; }
/* The disclosure is one full-width grid cell, not an auto-placed 73px logo column.
   Keep expanded content bounded so one long disclosure does not stretch the entire row. */
.auin-offers-page .auin-offer-institution {
  grid-area: institution;
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-top: 2px;
  padding: 10px 0 0;
  border-top: 1px solid #e1eaf3;
}
.auin-offers-page .auin-offer-institution summary {
  width: 100%;
  max-width: 100%;
  color: #075689;
  font-size: .7rem;
  font-weight: 800;
  white-space: normal;
  overflow-wrap: anywhere;
}
.auin-offers-page .auin-offer-institution > div {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 12px;
  margin-top: 10px;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.auin-offers-page .auin-offer-institution p,
.auin-offers-page .auin-offer-institution dt,
.auin-offers-page .auin-offer-institution dd {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}
.auin-offers-page .auin-offer-institution dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  width: 100%;
  min-width: 0;
  margin: 10px 0;
}
.auin-offers-page .auin-offer-institution dt:not(:first-child) { margin-top: 9px; }
.auin-offers-page .auin-offer-institution dd { min-width: 0; margin-bottom: 5px; }
.auin-offers-page .auin-offer-sources { min-width: 0; }
.auin-offers-page .auin-offer-sources a { font-size: .7rem; overflow-wrap: anywhere; }
.auin-offers-page .auin-offers-sidebar {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px; width: 100%; position: static; margin-top: 24px;
}
.auin-offers-page .auin-offer-reasons { margin-top: 25px; }
.auin-offers-page .auin-offer-reasons > div { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1340px) {
  .auin-offers-page .auin-offer-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .auin-offers-page .auin-offer-pool { grid-template-columns: 94px minmax(190px,1.3fr) minmax(100px,.5fr) minmax(135px,.75fr); }
  .auin-offers-page .auin-offer-pool__art { width: 94px; height: 94px; }
  .auin-offers-page .auin-offer-pool__tagline { display: none; }
}
@media (max-width: 980px) {
  .auin-offers-page .auin-offer-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .auin-offers-page .auin-offer-pool { grid-template-columns: 100px minmax(160px,1fr) minmax(90px,.44fr); }
  .auin-offers-page .auin-offer-pool__metric:last-of-type { grid-column: 2 / -1; }
  .auin-offers-page .auin-offers-header::after { opacity: .35; }
  .auin-offers-page .auin-offers-sidebar { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 620px) {
  .auin-offers-page .auin-shell { width: calc(100% - 24px); }
  .auin-offers-page .auin-offers-header { padding-top: 12px; padding-bottom: 18px; }
  .auin-offers-page .auin-offers-header::after { display: none; }
  .auin-offers-page .auin-offer-pool { grid-template-columns: 74px minmax(0,1fr); gap: 6px 14px; padding: 12px; }
  .auin-offers-page .auin-offer-pool__art { width: 74px; height: 74px; }
  .auin-offers-page .auin-offer-pool__amount strong { font-size: 2.8rem; }
  .auin-offers-page .auin-offer-pool__metric { margin-top: 6px; padding-left: 0; border-left: 0; }
  .auin-offers-page .auin-offer-pool__metric:last-of-type { grid-column: auto; }
  .auin-offers-page .auin-offer-pool__tagline { display: none; }
  .auin-offers-page .auin-offer-list { grid-template-columns: minmax(0,1fr); }
  .auin-offers-page .auin-offer-rank { top: 9px; }
  .auin-offers-page .auin-offer-category-tabs { order: 1; flex-basis: 100%; }
  .auin-offers-page .auin-offers-sort { order: 2; }
  .auin-offers-page .auin-offer-filter-card { order: 3; margin-left: auto; }
  .auin-offers-page .auin-offer-reasons > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/*
 * Offers first-screen rhythm: remove the oversized hero-to-pool gap introduced
 * by the shared inner-route styles. This is intentionally scoped to Offers.
 */
body.auin-inner-route .auin-offers-page .auin-offers-header {
  padding-bottom: 22px;
}
body.auin-inner-route .auin-offers-page .auin-route-content {
  margin-top: 0;
  padding-top: 20px;
}

/* Repositioned ticker: reuse existing styles, data, motion and a11y hooks. */
body.auin-inner-route .auin-offers-page .auin-offers-trust {
  margin-bottom: 16px;
}
.auin-offers-page .auin-reward-ticker {
  z-index: 1;
  max-width: 100%;
  margin: 0 0 16px;
  border: 1px solid #d6e1f5;
  border-radius: 12px;
  box-shadow: 0 5px 16px rgba(16, 44, 77, .035);
}
.auin-offers-page .auin-reward-ticker__shell {
  max-width: none;
  min-height: 52px;
  padding: 5px 14px;
}

@media (max-width: 620px) {
  body.auin-inner-route .auin-offers-page .auin-offers-header {
    padding-bottom: 16px;
  }
  body.auin-inner-route .auin-offers-page .auin-route-content {
    padding-top: 16px;
  }
  .auin-offers-page .auin-reward-ticker__shell {
    min-height: 44px;
    padding: 4px 8px;
  }
}

/*
 * Offers compact first screen — the breadcrumb now lives inside the hero,
 * instead of occupying a large separate strip between the nav and title.
 * Only applies to the two bilingual Offers templates.
 */
body.auin-inner-route .auin-offers-page > .auin-offers-header {
  padding: 16px 0 18px;
}
body.auin-inner-route .auin-offers-page > .auin-offers-header > .auin-breadcrumb {
  position: relative;
  z-index: 1;
  width: calc(100% - 56px);
  max-width: 1600px;
  min-height: 0;
  margin: 0 auto 10px;
  padding: 0;
  line-height: 1.4;
}
body.auin-inner-route .auin-offers-page > .auin-route-content {
  margin-top: 0;
  padding-top: 12px;
}
body.auin-inner-route .auin-offers-page > .auin-route-content > .auin-offer-pool {
  margin-top: 0;
}

@media (max-width: 620px) {
  body.auin-inner-route .auin-offers-page > .auin-offers-header {
    padding: 12px 0 14px;
  }
  body.auin-inner-route .auin-offers-page > .auin-offers-header > .auin-breadcrumb {
    width: calc(100% - 24px);
    margin-bottom: 7px;
  }
  body.auin-inner-route .auin-offers-page > .auin-route-content {
    padding-top: 10px;
  }
}

/* Breadcrumb belongs to the hero copy column, not a separate full-width band.
   Override the inner-page breadcrumb spacing only on the bilingual Offers routes. */
body.auin-inner-route .auin-offers-page .auin-offers-header > .auin-shell > div:first-child > .auin-breadcrumb {
  width: auto;
  max-width: 100%;
  min-height: 0;
  margin: 0 0 12px;
  padding: 0;
  line-height: 1.45;
}
body.auin-inner-route .auin-offers-page .auin-offers-header > .auin-shell > div:first-child > .auin-breadcrumb ol {
  margin: 0;
  padding: 0;
}
body.auin-inner-route .auin-offers-page .auin-offers-header {
  padding-top: 18px;
  padding-bottom: 18px;
}
body.auin-inner-route .auin-offers-page .auin-offers-header > .auin-shell {
  gap: 16px;
}
body.auin-inner-route .auin-offers-page > .auin-route-content {
  padding-top: 16px;
}
@media (max-width: 620px) {
  body.auin-inner-route .auin-offers-page .auin-offers-header {
    padding-top: 14px;
    padding-bottom: 16px;
  }
  body.auin-inner-route .auin-offers-page .auin-offers-header > .auin-shell > div:first-child > .auin-breadcrumb {
    margin-bottom: 8px;
  }
  body.auin-inner-route .auin-offers-page > .auin-route-content {
    padding-top: 12px;
  }
}

/* Follow-up: visually compact the whole banner, not only the breadcrumb.
 * The skyline remains decoration; it must not reserve additional hero height. */
body.auin-inner-route .auin-offers-page > .auin-offers-header {
  padding-block: 8px 12px;
}
body.auin-inner-route .auin-offers-page .auin-offers-header > .auin-shell > div:first-child > .auin-breadcrumb {
  margin-bottom: 5px;
  font-size: .76rem;
}
body.auin-inner-route .auin-offers-page .auin-offers-header .auin-page-kicker {
  display: inline-block;
  margin-bottom: 3px;
}
body.auin-inner-route .auin-offers-page .auin-offers-header h1 {
  margin: 0 0 3px;
  font-size: clamp(1.85rem, 3vw, 2.75rem);
  line-height: 1.12;
}
body.auin-inner-route .auin-offers-page .auin-offers-header p {
  line-height: 1.45;
}
body.auin-inner-route .auin-offers-page > .auin-route-content {
  margin-top: 0;
  padding-top: 10px;
}
@media (max-width: 620px) {
  body.auin-inner-route .auin-offers-page > .auin-offers-header {
    padding-block: 8px 10px;
  }
  body.auin-inner-route .auin-offers-page .auin-offers-header h1 {
    font-size: clamp(1.65rem, 7vw, 2.15rem);
  }
  body.auin-inner-route .auin-offers-page > .auin-route-content {
    padding-top: 10px;
  }
}