/* ============================================================================
   RANCO concept gallery — the client-facing "pick one" page.
   Its job is to be quiet: the three thumbnails should be the loudest thing on
   the screen, not the gallery's own styling. Thumbnails are drawn in CSS rather
   than screenshotted, so they never go stale when a concept is tweaked.
   ========================================================================= */

body {
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  color: var(--ink); background: #FBFCFE; line-height: 1.6;
}
.wrap {
  width: 100%; max-width: 1180px; margin: 0 auto;
  padding: clamp(28px, 5vh, 64px) clamp(20px, 5vw, 56px) clamp(40px, 6vh, 72px);
}

/* --- head ------------------------------------------------------------------ */
.g-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 3.6vw, 48px); align-items: center;
  padding-bottom: clamp(24px, 4vh, 44px);
  border-bottom: 2px solid var(--navy);
}
.g-logo { width: auto; height: clamp(84px, 11vw, 132px) }
.g-eyebrow {
  font-size: .68rem; letter-spacing: .26em; text-transform: uppercase;
  font-weight: 600; color: var(--blue-tx); margin-bottom: .55em;
}
.g-head h1 {
  font-size: clamp(1.5rem, 3.4vw, 2.4rem); font-weight: 600; color: var(--navy);
  letter-spacing: -.018em; line-height: 1.15; text-wrap: balance;
}
.g-lead { margin-top: .7em; max-width: 62ch; color: var(--muted); font-size: clamp(.94rem, 1.2vw, 1.03rem) }

/* --- the three cards -------------------------------------------------------- */
.g-grid {
  list-style: none; display: grid; gap: clamp(18px, 2.4vw, 30px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(26px, 4.5vh, 50px) 0;
}
.g-card {
  border: 1px solid #DEE6F0; border-radius: 6px; background: #fff; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .g-card:hover { transform: translateY(-5px); border-color: #B9CDE4;
                  box-shadow: 0 20px 44px rgba(34, 53, 102, .12) }
}
@media (prefers-reduced-motion: reduce) { .g-card, .g-card:hover { transform: none; transition: none } }

/* --- CSS thumbnails: a schematic of each layout, not a screenshot ----------- */
.g-thumb {
  display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-bottom: 1px solid #DEE6F0;
}
.g-thumb .t-logo {
  position: absolute; width: 17%; height: 22%; border-radius: 2px;
  background: var(--navy);
}
.g-thumb .t-lines { position: absolute; display: flex; flex-direction: column; gap: 7%; }
.g-thumb .t-lines i { display: block; height: 4px; border-radius: 2px; background: #C6D3E5 }

/* A — white, logo left, ledger right, solid block bottom-right */
.g-thumb-a { background: #fff }
.g-thumb-a .t-rule { position: absolute; left: 8%; right: 8%; top: 12%; height: 2px; background: var(--navy) }
.g-thumb-a .t-logo { left: 10%; top: 30%; }
.g-thumb-a .t-lines { left: 44%; right: 10%; top: 26%; }
.g-thumb-a .t-lines i:nth-child(1) { width: 84% } .g-thumb-a .t-lines i:nth-child(2) { width: 66% }
.g-thumb-a .t-lines i:nth-child(3) { width: 92% }
.g-thumb-a .t-block { position: absolute; left: 44%; right: 10%; bottom: 16%; height: 24%;
                      background: var(--navy); border-radius: 2px }

/* B — split: white left, navy photo panel right */
.g-thumb-b { background: #fff }
.g-thumb-b .t-half { position: absolute; inset: 0 0 0 54%; background:
  linear-gradient(160deg, var(--navy) 0%, #4E6EA8 62%, #93B4D8 100%) }
.g-thumb-b .t-seam { position: absolute; top: 0; bottom: 0; left: 54%; width: 5px;
  background: repeating-linear-gradient(to bottom, var(--blue) 0 8px, transparent 8px 13px) }
.g-thumb-b .t-logo { left: 9%; top: 20%; width: 22%; height: 27% }
.g-thumb-b .t-lines { left: 9%; width: 36%; top: 58%; }
.g-thumb-b .t-lines i:nth-child(1) { width: 92% } .g-thumb-b .t-lines i:nth-child(2) { width: 70% }
.g-thumb-b .t-lines i:nth-child(3) { width: 84% }

/* D — white, one centred column: logo, three hairline rows, one pill button */
.g-thumb-d { background: #fff }
.g-thumb-d::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(18rem 12rem at 50% -12%, rgba(50,143,206,.16), transparent 70%);
}
.g-thumb-d .t-logo { left: 50%; transform: translateX(-50%); top: 14%; width: 18%; height: 24% }
.g-thumb-d .t-lines { left: 20%; right: 20%; top: 48%; gap: 9% }
.g-thumb-d .t-lines i { width: 100%; height: 1px; background: #E4EAF3; border-radius: 0 }
.g-thumb-d .t-pill {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 15%;
  width: 26%; height: 11%; border-radius: 999px; background: var(--navy);
}

/* C — light blue, centred logo, three columns, skyline foot */
.g-thumb-c { background: #F4F8FC }
.g-thumb-c .t-logo { left: 50%; transform: translateX(-50%); top: 13%; width: 19%; height: 25% }
.g-thumb-c .t-cols { position: absolute; left: 9%; right: 9%; top: 46%; display: flex; gap: 5% }
.g-thumb-c .t-cols i { flex: 1; height: 34px; border-radius: 2px; background: #fff;
  border: 1px solid #D6E2EF; border-top: 3px solid var(--blue) }
.g-thumb-c .t-sky { position: absolute; inset: auto 0 0 0; height: 30%;
  background: repeating-linear-gradient(to right, rgba(50,143,206,.5) 0 4px, transparent 4px 11px);
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 100%);
          mask-image: linear-gradient(to top, #000 10%, transparent 100%) }

/* --- card text -------------------------------------------------------------- */
.g-meta { padding: clamp(15px, 1.8vw, 22px); display: flex; flex-direction: column; flex: 1 }
.g-tag {
  font-size: .63rem; letter-spacing: .24em; text-transform: uppercase;
  font-weight: 700; color: var(--blue-tx); margin-bottom: .3em;
}
/* the recommended card carries a quiet edge rather than a badge — it should
   read as "start here", not as a sales sticker */
.g-pick { border-color: #A9C6E4; box-shadow: 0 10px 30px rgba(34,53,102,.09) }
.g-pick .g-tag { color: var(--navy) }
.g-meta h2 { font-size: clamp(1.06rem, 1.5vw, 1.24rem); font-weight: 600; color: var(--navy) }
.g-meta p { margin-top: .5em; font-size: .9rem; color: var(--muted) }
.g-open {
  margin-top: auto; padding-top: 1em; font-size: .86rem; font-weight: 600; color: var(--navy);
}
.g-open:hover { color: var(--blue-tx) }

/* --- note + foot ------------------------------------------------------------- */
.g-note {
  border: 1px solid #DEE6F0; border-left: 3px solid var(--blue); border-radius: 4px;
  background: #fff; padding: clamp(16px, 2vw, 26px);
}
.g-note h2 { font-size: 1rem; font-weight: 600; color: var(--navy); margin-bottom: .6em }
.g-note ul { padding-left: 1.15em }
.g-note li { font-size: .91rem; color: var(--muted); margin-bottom: .5em }
.g-note b { color: var(--navy); font-weight: 600 }

.g-foot {
  margin-top: clamp(24px, 4vh, 44px); padding-top: clamp(13px, 2vh, 18px);
  border-top: 1px solid #DEE6F0;
  display: flex; justify-content: space-between; gap: 10px 22px; flex-wrap: wrap;
  font-size: .78rem; color: var(--muted);
}
.g-foot a { color: var(--muted); border-bottom: 1px solid #C3D2E4; padding-bottom: 1px }
.g-foot a:hover { color: var(--navy); border-color: var(--navy) }

/* --- responsive --------------------------------------------------------------- */
@media (max-width: 940px) {
  .g-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 660px) {
  .g-head { grid-template-columns: minmax(0, 1fr); gap: 16px; text-align: left }
  .g-logo { height: clamp(72px, 20vw, 100px) }
  .g-grid { grid-template-columns: minmax(0, 1fr) }
  .g-foot { flex-direction: column; gap: 6px }
}