/* =========================================================
   STUDIO NOVO — Template Detail page (generic, all templates)
   Shared tokens, reset, buttons, header, footer, and the
   scroll-reveal helper live in common.css (loaded first).
   This file is the LAYOUT only — every template (Willow, Oak & Co.,
   The Bramble, ...) shares this same stylesheet. Per-template
   content and colours live in templatesdetailsdata.js.
   ========================================================= */

section{ padding: 96px 0; }

/* These sections sit back-to-back; tighten the seams between them so
   the gap matches the ~56px rhythm already used inside the Pricing block,
   instead of two full 96px section paddings stacking up to ~192px. */
.tw-preview{ padding-bottom: 48px; }
.tw-pricing-section{ padding-top: 48px; padding-bottom: 48px; }
.tw-next-section{ padding-top: 48px; padding-bottom: 48px; }
.tw-faq-section{ padding-top: 48px; }

/* =========================================================
   Shared bits used across several sections on this page
   ========================================================= */
.step-tag{
  display:flex; align-items:center; gap: 14px;
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--green); font-weight:600; margin-bottom: 20px;
}
.step-tag em{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-style:normal; font-family: var(--serif); font-size:.85rem;
  color: var(--ink); background: var(--paper); border:1px solid var(--line);
}

.check-list{ display:flex; flex-direction:column; gap:10px; }
.check-list li{
  font-size:.92rem; color: var(--ink-soft); padding-left:26px; position:relative;
}
.check-list li::before{ content:"✓"; position:absolute; left:0; color: var(--green); font-weight:600; }
.check-list--sm li{ font-size:.86rem; }

/* "05 What You Need to Provide" — same checkmark treatment and main-text
   size/colour as .check-list (so it reads as part of the same family of
   lists), plus a second, visibly smaller line underneath each item for
   its description. Title is a little bolder than plain body text so it
   reads clearly as the "main" line, with the description secondary. */
.provide-list{ display:flex; flex-direction:column; gap:16px; }
.provide-list li{ padding-left:26px; position:relative; }
.provide-list li::before{ content:"✓"; position:absolute; left:0; top:1px; color: var(--green); font-weight:600; }
.provide-list__title{ display:block; font-size:.92rem; font-weight:500; color: var(--ink-soft); }
.provide-list__desc{ display:block; font-size:.78rem; color: var(--ink-faint); line-height:1.5; margin-top:3px; }

/* Placeholder colour blocks (hero mock, gallery tiles, style swatches, etc.)
   get their background colour inline, straight from each template's data
   object — see templatesdetailsdata.js. Nothing template-specific here. */

/* =========================================================
   Hero
   ========================================================= */
.tw-hero{ padding: 76px 0 40px; overflow:hidden; }
.tw-hero__inner{
  display:grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items:center;
}
.tw-hero__title{ font-size: clamp(3.2rem, 8vw, 5.2rem); line-height:1; margin: 6px 0 20px; }
.tw-hero__desc{ color: var(--ink-soft); font-size: 1.02rem; max-width: 420px; }
.tw-hero__actions{ display:flex; gap:12px; flex-wrap:wrap; margin: 30px 0 40px; }

.tw-hero__visual{ position:relative; }
.tw-hero__photo{
  display:block; width:100%; max-width: 560px; margin: 0 auto;
}

/* =========================================================
   Full preview / live demo / included
   ========================================================= */
.tw-preview{ background: var(--cream-2); }
/* "03 What's Included" (.tw-preview__col3) is its own grid item rather
   than being nested inside .tw-preview__col, so its position can differ
   between desktop/tablet and mobile without changing the DOM. On desktop
   it's placed in the same column as "01"/"02", one row below them —
   visually identical to the old nested layout — via explicit
   grid-template-areas. See the Tablet/Mobile overrides below for how the
   stacked order changes at each breakpoint. */
.tw-preview__grid{
  display:grid; grid-template-columns: .8fr 1fr .8fr; gap: 40px; align-items:start;
  grid-template-areas:
    "col  frame right"
    "col3 frame right";
}
.tw-preview__col{ grid-area: col; }
.tw-preview__frame{ grid-area: frame; }
.tw-preview__col--right{ grid-area: right; }
.tw-preview__col3{ grid-area: col3; }
.tw-preview__note{ color: var(--ink-soft); font-size:.92rem; max-width: 260px; }

.tw-preview__frame{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 10px; box-shadow: 0 30px 60px -30px rgba(20,40,29,.25);
}
.tw-preview__scroll{
  max-height: 640px; overflow-y:auto; border-radius: var(--radius);
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.tw-preview__photo{
  width: 100%; height: auto; display: block; border-radius: var(--radius);
}

.tw-preview__col--right{ display:flex; flex-direction:column; gap: 36px; }
/* "02 Live Demo" and "03 What's Included" both live in the LEFT column
   (below the "01" note) — that column isn't a flex stack like --right,
   so give each block its own top margin instead of relying on a flex
   gap. Scoped to the left column only (:not(--right)) so it doesn't
   double up with --right's own gap. */
.tw-preview__col:not(.tw-preview__col--right) .tw-preview__block{ margin-top: 40px; }
.tw-preview__block .btn{ margin-top: 6px; }
.tw-preview__link{ margin-top:10px; font-size:.82rem; color: var(--ink-faint); }

/* =========================================================
   Pricing
   ========================================================= */
.tw-pricing-head{ margin-bottom: 24px; }
.price-row{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; align-items:stretch; }

.price-card{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px; height:100%; position:relative;
}
.price-card__title{ font-size:1.05rem; margin-bottom: 4px; }
.price-card__label{ font-size:.86rem; color: var(--ink-soft); margin-bottom: 6px; }
.price-card__price{ font-family: var(--serif); font-size:2rem; margin-bottom: 16px; }
/* Each plan card carries its own "Choose This Template" button — shown
   on mobile only, where there's no room/need for the separate bottom
   .center-cta button below the whole pricing row (see Responsive —
   Mobile). Desktop/tablet keep using the bottom button plus the
   click-to-select cards above it. */
.price-card__cta{ display:none; width:100%; justify-content:center; margin-top: 18px; }
/* The two plan cards are clickable — picking one marks it as the
   visitor's choice and carries that choice through to Get Started as
   ?websiteType=..., alongside the template that's already pre-selected
   (see initPricingSelector in templatesdetails.js). "Up to 5 Pages"
   starts pre-selected since it's the "Most Popular" plan, but clicking
   "1 Page Website" moves the selection there instead — the badge itself
   stays put, it's a factual label, not a selection.
   Selection needs to be unmistakable at a glance, so it's three cues
   together: a green border, a soft glow (box-shadow, so it doesn't
   shift layout the way a thicker border would), and a small checkmark
   badge that animates in — a subtle hover state on the unselected card
   also hints that it's clickable before it's picked. */
.price-card--plan{ position:relative; cursor:pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.price-card--plan:hover{ border-color: var(--green); }
.price-card--plan.is-selected{
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(30,59,44,.12);
}
.price-card--plan::after{
  content:"✓"; position:absolute; top:14px; right:14px; width:22px; height:22px;
  border-radius:50%; background: var(--green); color: var(--cream);
  font-size:.7rem; font-weight:700; display:flex; align-items:center; justify-content:center;
  opacity:0; transform: scale(.6); transition: opacity .15s ease, transform .15s ease;
}
.price-card--plan.is-selected::after{ opacity:1; transform: scale(1); }
.price-card__badge{
  position:absolute; top:-13px; left:26px; background: var(--green); color: var(--cream);
  font-size:.7rem; font-weight:600; padding:5px 14px; border-radius:999px; letter-spacing:.03em;
}
/* Optional Add-ons card — its label sits directly above the addon
   list, unlike the pricing card next to it where a large price value
   (2rem, margin-bottom:16px) already creates a clear gap below the
   label. Without that, the default 6px margin left "Optional Add-ons"
   crowding right into "Extra Page" below it. Give it real breathing
   room and read it like a proper heading instead of body text. */
.price-card--addons .price-card__label{
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--ink);
}
.price-card__addons-note{ font-size:.78rem; color: var(--ink-faint); margin-bottom: 18px; }
.addon-list{ display:flex; flex-direction:column; gap:10px; }
.addon-list li{ display:flex; justify-content:space-between; font-size:.85rem; color: var(--ink-soft); }
.addon-list li span:last-child{ color: var(--ink-faint); }

/* Extra breathing room between "Ideal for small businesses like:" and
   the pills below it — otherwise the note reads as if it's crowding
   straight into the first row of pills. */
.tw-preview__note + .tag-list{ margin-top: 22px; }
.tag-list{ display:flex; flex-wrap:wrap; gap:10px; }
.tag-list li{
  font-size:.82rem; color: var(--ink-soft); border:1px solid var(--line); border-radius:999px;
  padding: 7px 16px; background: var(--paper);
}

/* =========================================================
   The Process (standalone, centered — same treatment as FAQ below
   it) — same 4-step timeline as the Get Started page's .gs-next
   (contact.css). Class names stay .tw-next-* (predates the "The
   Process" heading text) to avoid an unnecessary rename.
   ========================================================= */
.tw-next-head{ text-align:center; margin-bottom: 40px; }
.tw-next-head .step-tag{ justify-content:center; margin-bottom:0; }

.tw-next__grid{
  display:grid; grid-template-columns: repeat(4,1fr);
}
.tw-next__step{
  padding: 4px 26px; border-left: 1px solid var(--line);
}
.tw-next__step:first-child{ border-left:none; padding-left:0; }
.tw-next__num{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background: var(--green); color: var(--cream);
  font-family: var(--serif); font-size:1rem;
  margin-bottom: 18px;
}
.tw-next__step h3{ font-size:1.05rem; margin-bottom:8px; }
.tw-next__step p{ color: var(--ink-soft); font-size:.88rem; }

/* =========================================================
   FAQ (standalone, centered — same treatment as the pricing page)
   — the accordion mechanics (.faq__item, .faq__icon pseudo-
     elements, open/close transitions) now live in common.css,
     shared with the pricing page. Sizing stays here.
   ========================================================= */
.tw-faq-head{ text-align:center; margin-bottom: 40px; }
.tw-faq-head .step-tag{ justify-content:center; margin-bottom:0; }

.faq{ display:flex; flex-direction:column; gap: 10px; }
.faq--centered{ max-width: 760px; margin: 0 auto; gap: 12px; }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding: 16px 20px; font-size:.9rem; font-weight:500; color: var(--ink); text-align:left;
}
.faq--centered .faq__q{ padding: 18px 22px; font-size:.95rem; }
.faq__icon{ position:relative; width:14px; height:14px; flex:0 0 auto; margin-left: 16px; }
.faq__a p{ padding: 0 20px 18px; color: var(--ink-soft); font-size:.86rem; }
.faq--centered .faq__a p{ padding: 0 22px 20px; font-size:.9rem; }

/* =========================================================
   Responsive — Tablet
   ========================================================= */
@media (max-width: 1024px){
  section{ padding: 76px 0; }
  .tw-preview{ padding-bottom: 40px; }
  .tw-pricing-section{ padding-top: 40px; padding-bottom: 40px; }
  .tw-next-section{ padding-top: 40px; padding-bottom: 40px; }
  .tw-faq-section{ padding-top: 40px; }
  .tw-hero__inner{ grid-template-columns: 1fr; gap: 48px; }
  .tw-hero__visual{ order:-1; }
  .tw-preview__grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "col"
      "col3"
      "frame"
      "right";
  }
  .tw-preview__col--right{ flex-direction:row; flex-wrap:wrap; gap: 30px; }
  .tw-preview__col--right .tw-preview__block{ flex:1; min-width:220px; }
  .price-row{ grid-template-columns: 1fr 1fr; }
  .price-card--addons{ grid-column: 1 / -1; }
  .tw-next__grid{ grid-template-columns: 1fr 1fr; gap: 40px 0; }
  .tw-next__step:nth-child(odd){ border-left:none; padding-left:0; }
}

/* =========================================================
   Responsive — Mobile
   ========================================================= */
@media (max-width: 680px){
  section{ padding: 56px 0; }
  .tw-preview{ padding-bottom: 28px; }
  .tw-pricing-section{ padding-top: 28px; padding-bottom: 28px; }
  .tw-next-section{ padding-top: 28px; padding-bottom: 28px; }
  .tw-faq-section{ padding-top: 28px; }
  .tw-hero{ padding: 48px 0 20px; }
  .tw-hero__actions{ flex-direction:column; }
  .tw-hero__actions .btn{ width:100%; }

  .tw-preview__scroll{ max-height: 480px; }
  .tw-preview__col--right{ flex-direction:column; }

  /* At mobile only, "03 What's Included" moves to after the live preview
     frame instead of sitting directly under "01"/"02" (still the case at
     tablet and up — see the Tablet override above). */
  .tw-preview__grid{
    grid-template-areas:
      "col"
      "frame"
      "col3"
      "right";
  }

  .price-row{ grid-template-columns: 1fr; }
  .price-card--addons{ grid-column: auto; }

  /* Each plan box gets its own button instead of relying on the single
     bottom "Choose This Template" button below the whole row — one tap,
     no need to scroll back up to see which card is currently selected.
     With a dedicated button always visible on every card, the desktop/
     tablet "is-selected" indicator (border, glow, checkmark) becomes
     redundant here, so it's switched off at this breakpoint only. */
  .price-card__cta{ display:flex; }
  .center-cta{ display:none; }
  .price-card--plan.is-selected{
    border-color: var(--line);
    box-shadow: none;
  }
  .price-card--plan.is-selected::after{ opacity:0; transform: scale(.6); }

  /* Vertical timeline (mobile only): number sits in a fixed-width left
     column acting as a line marker; title/description are indented into
     the right column so every step lines up, with a connecting line
     running through the markers — same pattern as .gs-next on the Get
     Started page. */
  .tw-next__grid{ grid-template-columns: 1fr; gap: 0; }
  .tw-next__step{
    position: relative;
    display: grid;
    grid-template-columns: 34px 1fr;
    column-gap: 18px;
    row-gap: 6px;
    align-items: start;
    border-left: none;
    padding: 0 0 32px;
  }
  .tw-next__step:last-child{ padding-bottom: 0; }
  .tw-next__num{
    grid-column: 1; grid-row: 1; align-self: center; margin-bottom: 0;
    position: relative; z-index: 1;
  }
  .tw-next__step h3{ grid-column: 2; grid-row: 1; align-self: center; margin-bottom: 0; }
  .tw-next__step p{ grid-column: 2; grid-row: 2; }
  .tw-next__step::before{
    content: "";
    position: absolute; left: 16px; top: 34px; bottom: 0;
    width: 1px; background: var(--line);
  }
  .tw-next__step:last-child::before{ content: none; }

  .tw-hero__title{ font-size: clamp(2.4rem, 12vw, 3.6rem); }
}