/* ===============================================================
   TOOLDUCK — Social Media Maker
   ===============================================================
   Public pages: landing, maker pages, the template library, category
   pages and template pages.

   Reuses main.css and tool.css tokens throughout. Nothing here defines
   a colour of its own, so the whole product follows the theme toggle
   without a single dark-mode override.
   =============================================================== */

/* The library is a working surface — its content is the filter bar and
   a grid of previews — so it gets the compact header too. The rules sit
   here rather than in social-studio.css because this is the stylesheet
   the library page actually loads. */
.tool-page--social-templates .band--first.band--tight {
    padding-block: .35rem .7rem;
}

.tool-page--social-templates .tool-page__head h1 {
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    margin-bottom: .35rem;
}

.tool-page--social-templates .tool-page__badge { display: none; }
.tool-page--social-templates .feature-chips { margin-bottom: .9rem; }

/* ---------------------------------------------------------------
   Product badges
   --------------------------------------------------------------
   These live here rather than reusing `.shotbadges` from the App
   Screenshot Maker. That class is in screenshot-maker.css, which this
   product's pages never load — so the list rendered as a plain <ul>:
   bullets, each icon dropped onto its own line above its label, and
   about 160px of height for four short claims. Adding a stylesheet
   dependency between two products to share four lines of CSS would be
   worse than the duplication.
   -------------------------------------------------------------- */

.sobadges {
    list-style: none;
    margin: 0 0 .8rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .5rem;
}

.sobadges li {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink-2);
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .28rem .65rem;
    max-width: 100%;
}

.sobadges .icon {
    color: var(--ok);
    flex: none;
    width: 14px;
    height: 14px;
}

/* ---------------------------------------------------------------
   The product landing page
   --------------------------------------------------------------
   The category hero reserves a 320px column for category artwork. On a
   page whose whole point is the templates, that column and the space
   above the first preview push the thing the visitor came for below the
   fold. The art is dropped, the hero is compacted, and the template
   showcase is moved to the top of the view.
   -------------------------------------------------------------- */

.category-page--social .category-hero {
    padding: 1.1rem 0 .25rem;
    gap: 0;
}

.category-page--social .category-hero__art { display: none; }

.category-page--social .category-hero__text { flex: 1 1 100%; }

/* The band that wraps the hero plus the view below it. Tightened so the
   first row of previews starts around 500px down rather than 700. */
.category-page--social .band--first { padding-bottom: 0; }

.category-page--social .section { padding-top: .9rem; }

/* ---------------------------------------------------------------
   Buttons and chips
   -------------------------------------------------------------- */
.sobtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 38px;
    padding: .45rem .85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-2);
    font: inherit;
    font-size: .86rem;
    font-weight: 650;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.sobtn:hover { background: var(--bg-soft); color: var(--ink); border-color: var(--border-strong); }
.sobtn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--brand); }

.sobtn--primary {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
}

.sobtn--primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: var(--on-brand); }

.sobtn--block { width: 100%; }

.sochip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 650;
    padding: .18rem .5rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-soft);
    color: var(--ink-3);
    white-space: nowrap;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.sochip--cat { background: var(--brand-soft); color: var(--brand); border-color: transparent; }
.sochip--free { background: var(--ok-bg); color: var(--ok); border-color: transparent; }

.sochip--link {
    text-decoration: none;
    background: var(--surface);
    color: var(--ink-2);
    font-size: .8rem;
    padding: .35rem .7rem;
}

.sochip--link:hover { border-color: var(--brand); color: var(--brand); }

.sochip__n {
    font-size: .68rem;
    font-weight: 700;
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------
   Template cards
   -------------------------------------------------------------- */
.sogrid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 1.1rem;
}

/* A row scrolls sideways rather than wrapping: a wrapped grid of tall
   previews turns one row into a wall that pushes the next section off
   the screen. `min-width: 0` on the rows is load-bearing — a grid item's
   minimum width is `auto`, so without it the row refuses to shrink and
   the page scrolls sideways instead. */
.sorow { min-width: 0; }

.sogrid--row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(200px, 215px);
    grid-template-columns: none;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    padding-bottom: .7rem;
}

.sogrid--row > * { scroll-snap-align: start; }

.socard {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.socard:hover { border-color: var(--brand-border); box-shadow: var(--shadow-md); }

.socard__poster {
    display: grid;
    place-items: center;
    padding: .8rem;
    /* `align-content: start` keeps the preview at the top of its box
       rather than floating in the middle of a stretched auto row. */
    align-content: start;
    min-height: 190px;
    overflow: hidden;
}

.socard__canvas {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 12px 26px -16px rgba(2, 6, 23, .55);
    background: rgba(255, 255, 255, .06);
}

.socard__body {
    padding: .75rem .8rem .85rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex: 1;
}

.socard__name {
    margin: 0;
    font-weight: 700;
    font-size: .92rem;
    color: var(--ink);
    line-height: 1.25;
}

.socard__meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.socard__dims {
    margin: 0;
    font-size: .74rem;
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
}

/* The actions are two rows, not one. Three controls across a 200px card
   does not fit: the primary button was being clipped to "Use templat",
   which still looks like a button until you read it. The primary action
   takes the width, and the two secondary controls share the row below. */
.socard__actions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}

.socard__actions .sobtn { flex: 1 1 100%; }

.socard__like {
    flex: none;
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-3);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.socard__like:hover { color: var(--err); border-color: var(--border-strong); }
.socard__like:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.socard__like[aria-pressed="true"] {
    color: var(--err);
    border-color: var(--err);
    background: var(--err-bg);
}

.socard__open {
    flex: 1 1 auto;
    text-align: right;
    font-size: .8rem;
    font-weight: 650;
    color: var(--brand);
    text-decoration: none;
}

.socard__open:hover { text-decoration: underline; }

[data-socard][hidden] { display: none !important; }

/* ---------------------------------------------------------------
   Library
   -------------------------------------------------------------- */
.solib { display: grid; gap: 1.2rem; }

.solib__cats {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.sofilter {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-soft);
    padding: 1rem;
    display: grid;
    gap: .8rem;
}

.sofilter__search {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    padding: 0 .7rem;
    color: var(--ink-4);
    max-width: 44rem;
}

.sofilter__search input {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: .9rem;
    padding: .55rem 0;
    color: var(--ink);
    width: 100%;
    min-width: 0;
}

.sofilter__search input:focus { outline: none; }
.sofilter__search:focus-within { border-color: var(--brand); box-shadow: var(--focus-ring); }

.sofilter__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
    align-items: end;
}

.sofilter__reset .sobtn { width: 100%; }

.sofilter__count {
    margin: 0;
    font-size: .82rem;
    font-weight: 650;
    color: var(--ink-3);
}

.sofilter__note {
    margin: 0;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--ink-4);
}

.solib__empty {
    margin: 0;
    padding: 2rem 1rem;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    color: var(--ink-3);
    font-size: .9rem;
}

/* ---------------------------------------------------------------
   Category and template pages
   -------------------------------------------------------------- */
.socat__intro { max-width: 68ch; }
.socat__intro h2 { margin: 0 0 .5rem; font-size: 1.1rem; }
.socat__intro p { margin: 0 0 .7rem; font-size: .92rem; line-height: 1.6; color: var(--ink-3); }
.socat__links { margin-top: 1rem; }
.socat__links h2 { margin: 0 0 .6rem; font-size: 1.1rem; }

.sotpl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: 1.6rem;
    align-items: start;
}

.sotpl__stage {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.4rem;
    display: grid;
    place-items: center;
    min-height: 420px;
}

.sotpl__shot { margin: 0; display: grid; gap: .6rem; justify-items: center; }

.sotpl__canvas {
    display: block;
    width: auto;
    height: min(62vh, 560px);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    background: var(--bg-muted);
}

.sotpl__shot figcaption {
    font-size: .78rem;
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
}

.sotpl__side {
    display: grid;
    gap: .8rem;
    position: sticky;
    top: calc(var(--header-h) + 1rem);
}

.sotpl__facts {
    margin: 0;
    display: grid;
    gap: .45rem;
    font-size: .84rem;
}

.sotpl__facts > div {
    display: flex;
    justify-content: space-between;
    gap: .7rem;
    padding-bottom: .35rem;
    border-bottom: 1px dashed var(--border);
}

.sotpl__facts dt { color: var(--ink-3); margin: 0; }
.sotpl__facts dd { margin: 0; text-align: right; font-weight: 650; color: var(--ink); }

.sotpl__paletteLabel {
    margin: .2rem 0 .3rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-4);
}

.sotpl__palette { display: flex; gap: .35rem; }

.sotpl__swatch {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: 1px solid var(--border);
}

.sotpl__note {
    margin: 0;
    font-size: .76rem;
    line-height: 1.5;
    color: var(--ink-4);
}

/* ---------------------------------------------------------------
   Landing and maker pages
   -------------------------------------------------------------- */
.soland { display: grid; gap: 2rem; }

.sopageactions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: .4rem;
}

.sohero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: .4rem;
}

.sorow__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .8rem;
    flex-wrap: wrap;
}

.sorow__head h2 { margin: 0; font-size: 1.15rem; letter-spacing: -.01em; }

.sorow__more {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .84rem;
    font-weight: 650;
    color: var(--brand);
    text-decoration: none;
}

.sorow__more:hover { text-decoration: underline; }
.sorow__more svg { width: 14px; height: 14px; }

.soland__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.soland__step { display: flex; gap: .6rem; align-items: flex-start; }

.soland__num {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: .8rem;
    font-weight: 700;
}

.soland__stepText { display: grid; gap: .15rem; }
.soland__stepText strong { font-size: .9rem; color: var(--ink); }
.soland__stepText span { font-size: .82rem; line-height: 1.45; color: var(--ink-3); }

.soland__benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .7rem;
}

.soland__benefits li {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .88rem;
    color: var(--ink-2);
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .65rem .8rem;
}

.soland__benefits .icon { color: var(--ok); flex: none; }

.soland__formats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .9rem;
}

.soformatcard {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: 1rem;
}

.soformatcard h3 { margin: 0 0 .35rem; font-size: .95rem; }
.soformatcard p { margin: 0 0 .5rem; font-size: .82rem; line-height: 1.5; color: var(--ink-3); }

.soformatcard__dims {
    font-size: .78rem;
    font-weight: 650;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

.soland__section > h2 { margin: 0 0 .7rem; font-size: 1.15rem; }

/* ---------------------------------------------------------------
   Responsive
   -------------------------------------------------------------- */
@media (max-width: 1000px) {
    .sotpl { grid-template-columns: minmax(0, 1fr); }
    .sotpl__side { position: static; }
}

@media (max-width: 780px) {
    .sogrid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .sogrid--row { grid-auto-columns: minmax(165px, 180px); }
    .sotpl__stage { min-height: 0; padding: .9rem; }
    .sotpl__canvas { height: min(56vh, 420px); }
    .sopageactions .sobtn,
    .sohero__cta .sobtn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .socard { transition: none; }
}