/* Garden Style Quiz (page-garden-style-quiz.php): the approved mock-up, version 3, in the site's tokens. Everything is
   scoped to .sh-quiz, because every file in pages/ loads on every page. */

.sh-quiz { --sh-quiz-space: clamp(48px, 6vw, 84px); min-height: 640px; background: var(--sh-paper); line-height: 1.7; }
.sh-quiz [hidden] { display: none !important; }
.sh-quiz p { margin: 0; }
.sh-quiz h1, .sh-quiz h2, .sh-quiz h3 { margin: 0; line-height: 1.2; text-wrap: balance; }
.sh-quiz h1:focus, .sh-quiz h2:focus { outline: none; }
.sh-quiz img { max-width: 100%; display: block; }
.sh-quiz__wrap { max-width: var(--sh-wrap); margin: 0 auto; padding-inline: var(--sh-gutter); }
.sh-quiz__eyebrow { font: 600 13px/1.4 var(--sh-mont); letter-spacing: 3px; text-transform: uppercase; color: var(--sh-gold-deep); }

/* Photo hero (start and result) */
.sh-quiz__hero { position: relative; display: grid; place-items: center; text-align: center; min-height: 520px; overflow: hidden; color: #fff; background: #000; }
.sh-quiz__hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh-quiz__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(20,24,22,.38), rgba(20,24,22,.5)); }
.sh-quiz__hero-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 56px var(--sh-gutter); max-width: 820px; }
.sh-quiz__hero .sh-quiz__eyebrow { color: var(--sh-gold); }
.sh .sh-quiz__hero h1 { color: #fff; font-size: clamp(36px, 5.4vw, 60px); line-height: 1.12; }
.sh-quiz__hero p { font-size: clamp(17px, 1.6vw, 19px); }
.sh-quiz__hero--result { min-height: 460px; }
.sh-quiz__noscript a { color: #fff; text-decoration: underline; }

/* Buttons, as the mock-up */
.sh-quiz__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 34px; border-radius: 0; font: 500 13px/1.3 var(--sh-mont); letter-spacing: 3px; text-transform: uppercase; text-align: center; cursor: pointer; transition: background var(--sh-t) var(--sh-ease), color var(--sh-t) var(--sh-ease), border-color var(--sh-t) var(--sh-ease); }
.sh-quiz__btn--ghost { background: transparent; border: 1px solid rgba(255,255,255,.85); color: #fff; }
.sh-quiz__btn--ghost:hover { background: #fff; color: var(--sh-ink); }
.sh-quiz__btn--gold { background: var(--sh-gold-deep); border: 1px solid var(--sh-gold-deep); color: #fff; }
.sh-quiz__btn--gold:hover { background: var(--sh-gold); border-color: var(--sh-gold); }
.sh-quiz__btn--gold[disabled] { opacity: .6; cursor: wait; }
.sh-quiz__btn--line { background: transparent; border: 1px solid var(--sh-gold-deep); color: var(--sh-ink); }
.sh-quiz__btn--line:hover { background: var(--sh-gold-deep); color: #fff; }
.sh-quiz :where(button, a, input):focus-visible, .sh-quiz__ans:focus-visible { outline: 3px solid var(--sh-gold); outline-offset: 3px; }

/* Cream band: review and photo strip (start), "In the detail" (result) */
.sh-quiz__band { background: var(--sh-cream); padding-block: var(--sh-quiz-space); }
.sh-quiz__band .sh-quiz__wrap { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.sh-quiz__stars { color: var(--sh-gold); letter-spacing: 6px; font-size: 14px; }
.sh-quiz__band q { font: italic 300 clamp(19px, 2.2vw, 25px)/1.6 var(--sh-sans); color: var(--sh-ink); max-width: 760px; quotes: none; }
.sh-quiz__band cite { font: normal 600 13px/1.4 var(--sh-mont); letter-spacing: 3px; text-transform: uppercase; color: var(--sh-gold-deep); }
.sh-quiz__strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 2.4vw, 36px); width: 100%; }
.sh-quiz__strip img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* A question */
.sh-quiz__q { padding-block: clamp(36px, 5vw, 64px) var(--sh-quiz-space); }
.sh-quiz__q .sh-quiz__wrap { display: flex; flex-direction: column; gap: 26px; }
.sh-quiz__qhead { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.sh .sh-quiz__qhead h2 { font-size: clamp(28px, 3.6vw, 42px); }
.sh-quiz__progress { display: flex; gap: 6px; width: min(360px, 100%); }
.sh-quiz__progress span { flex: 1; height: 2px; background: var(--sh-line); }
.sh-quiz__progress span.is-on { background: var(--sh-gold); }
.sh-quiz__answers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
.sh-quiz__answers--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sh-quiz__ans { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0 0 18px; background: var(--sh-white); border: 1px solid transparent; border-radius: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color var(--sh-t) var(--sh-ease), transform var(--sh-t) var(--sh-ease); }
.sh-quiz__ans:hover { border-color: var(--sh-gold); transform: translateY(-2px); }
.sh-quiz__ph { display: block; overflow: hidden; }
.sh-quiz__ans img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .6s var(--sh-ease); }
.sh-quiz__answers--wide .sh-quiz__ans img { aspect-ratio: 3 / 2; }
.sh-quiz__ans:hover img { transform: scale(1.03); }
.sh-quiz__cap { padding-inline: 18px; font-size: 16.5px; line-height: 1.5; color: var(--sh-ink); }
.sh-quiz__letter { display: block; font: 600 13px/1.4 var(--sh-mont); letter-spacing: 2.5px; text-transform: uppercase; color: var(--sh-gold-deep); margin-bottom: 4px; }
.sh-quiz__back { align-self: center; background: none; border: 0; font: 600 13px/1.4 var(--sh-mont); letter-spacing: 2.5px; text-transform: uppercase; color: var(--sh-muted); cursor: pointer; padding: 8px; }
.sh-quiz__back:hover { color: var(--sh-gold-deep); }

/* Name and email */
.sh-quiz__gate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 640px; background: var(--sh-white); }
.sh-quiz__pic { position: relative; min-height: 320px; }
.sh-quiz__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh-quiz__form { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: clamp(32px, 5vw, 72px) var(--sh-gutter); max-width: 560px; }
.sh .sh-quiz__gate h2 { font-size: clamp(30px, 3.4vw, 42px); }
.sh-quiz form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.sh-quiz label span { display: block; font: 600 13px/1.4 var(--sh-mont); letter-spacing: 2px; text-transform: uppercase; color: var(--sh-ink); margin-bottom: 6px; }
.sh-quiz input { width: 100%; min-height: 52px; padding: 12px 16px; font: 400 17px/1.5 var(--sh-sans); color: var(--sh-ink); background: var(--sh-white); border: 1px solid rgba(74,77,78,.3); border-radius: 2px; }
.sh-quiz input::placeholder { color: #8a8d8e; }
.sh-quiz input:focus { outline: 2px solid var(--sh-gold); outline-offset: 0; border-color: var(--sh-gold); }
.sh-quiz input[aria-invalid="true"] { border-color: #b3261e; }
.sh-quiz__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sh-quiz__small { font-size: 15px; color: var(--sh-muted); }
.sh-quiz__err { color: #b3261e; font-size: 15px; }

/* Result */
.sh-quiz__brief { padding-block: var(--sh-quiz-space); }
.sh-quiz__brief .sh-quiz__wrap { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); }
.sh-quiz__main { display: flex; flex-direction: column; gap: 18px; }
.sh .sh-quiz__brief h2 { font-size: clamp(28px, 3.2vw, 38px); }
.sh-quiz__eyebrow--gap { margin-top: 10px; }
.sh-quiz__works { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.sh-quiz__works li { padding-left: 22px; position: relative; }
.sh-quiz__works li::before { content: ""; position: absolute; left: 0; top: .8em; width: 10px; height: 1px; background: var(--sh-gold-deep); }
.sh-quiz__side { display: flex; flex-direction: column; gap: 22px; padding-top: 6px; }
.sh-quiz__side div { display: flex; flex-direction: column; gap: 4px; }
.sh-quiz__side p { font-size: 16px; }
.sh-quiz__sent { display: flex; gap: 12px; align-items: baseline; padding: 16px 20px; background: var(--sh-white); border-left: 2px solid var(--sh-gold); font-size: 16px; }
.sh-quiz__cta { background: var(--sh-white); padding-block: var(--sh-quiz-space); }
.sh-quiz__cta .sh-quiz__wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.sh .sh-quiz__cta h2 { font-size: clamp(26px, 3vw, 36px); }
.sh-quiz__url { font: 400 14px/1.4 var(--sh-mont); letter-spacing: 1.5px; color: var(--sh-gold-deep); }
.sh-quiz__again { background: none; border: 0; font: 400 15px/1.5 var(--sh-sans); color: var(--sh-muted); text-decoration: underline; cursor: pointer; padding: 6px; }

@media (max-width: 900px) {
  .sh-quiz__answers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-quiz__gate, .sh-quiz__brief .sh-quiz__wrap { grid-template-columns: minmax(0, 1fr); }
  .sh-quiz__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sh-quiz__strip img:nth-child(n+4) { display: none; }
}
@media (max-width: 480px) {
  .sh-quiz__answers--wide { grid-template-columns: minmax(0, 1fr); }
  .sh-quiz__cap { padding-inline: 12px; font-size: 15px; }
  .sh-quiz__hero { min-height: 440px; }
}
@media (prefers-reduced-motion: no-preference) { .sh-quiz__screen.is-entering { animation: sh-quiz-rise .45s var(--sh-ease); } @keyframes sh-quiz-rise { from { opacity: .35; transform: translateY(8px); } to { opacity: 1; transform: none; } } }
@media (prefers-reduced-motion: reduce) { .sh-quiz__ans, .sh-quiz__ans img, .sh-quiz__btn { transition: none; } .sh-quiz__ans:hover, .sh-quiz__ans:hover img { transform: none; } }