/* =================================================================
   Willow — social media templates page

   Shared by social-media-templates.html and, once it exists, its Dutch
   twin nl/social-media-templates.html. Same one-file-two-languages rule
   as page-customers.css: keep everything here rather than in an inline
   <style> block, or the two languages drift.

   The page has two horizontal rails (the six free Canva templates, and
   the Pro custom examples). Both scroll-snap instead of wrapping —
   Kjell asked for "all in one row, with a slider if needed", so the row
   is authoritative and the overflow is the fallback, not the reverse.
   ================================================================= */

/* ========== Hero ========== */
.tpl-hero { padding: 88px 0 72px; }
.tpl-h1 {
  font-size: clamp(44px, 6.2vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 16px 0 0;
  max-width: 20ch;
}
.tpl-lede { margin-top: 24px; max-width: 60ch; }
.tpl-lede-2 {
  margin-top: 18px;
  max-width: 62ch;
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink-3);
}
.tpl-ctas { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; }

.tpl-h2 {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.024em;
  max-width: 30ch;
}

/* ========== Horizontal rails ==========
   Six cards must fit one row on a wide viewport: --max is 1320px, minus
   two 32px gutters and five 20px gaps leaves ~192px per card, so the
   track is 190px and the row scrolls below roughly 1300px rather than
   reflowing. scroll-snap keeps a card edge against the left rail so a
   half-card never reads as the end of the list. */
.tpl-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 190px;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Room for the focus ring on the download links, which would otherwise
     be clipped by overflow-x on the two outer cards. */
  padding: 4px;
  margin: 0 -4px;
  scrollbar-width: thin;
}
.tpl-rail > * { scroll-snap-align: start; }
/* Only three cards here, so the rail's fixed 190px track left the right
   half of the section empty and the Pro argument looking unfinished. Three
   equal columns fill the row and give the proof covers the presence the
   section needs; the scrolling-rail behaviour is kept for narrow viewports
   below, where three columns would be unreadable. */
.tpl-rail-pro {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  overflow-x: visible;
}
@media (max-width: 860px) {
  .tpl-rail-pro {
    grid-auto-flow: column;
    grid-auto-columns: 260px;
    grid-template-columns: none;
    gap: 20px;
    overflow-x: auto;
  }
}

/* Flex column with the link pushed to the bottom: the six descriptions run
   two or three lines, and without this the "Open in Canva" links sit at
   three different heights across the row. The grid already stretches every
   card to the tallest, so margin-top:auto is enough to line them up. */
.tpl-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* The six template covers are not one shape — some portrait, some square,
   at least one landscape. A square frame plus fit="contain" on the element
   shows every design whole and absorbs the difference as letterboxing,
   which is the right trade here: cropping a template preview hides the
   part of the layout the visitor is trying to judge. Frames stay uniform
   so the row reads as a set rather than a ragged edge. */
.tpl-card image-slot,
.tpl-card .tpl-cover {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
}
/* The covers are 4:5 and 1:1 mixed, so the intrinsic height fights the
   square frame above. contain settles it the same way fit="contain" does
   for the slots — whole design, letterboxed — instead of object-fit's
   default fill, which would stretch the portrait ones.

   height:auto is load-bearing, not tidiness: the markup carries width and
   height attributes (they reserve layout space and stop the row shifting
   as the covers load), and those map to CSS presentational hints. Without
   this line the 800px height hint stays definite, aspect-ratio above is
   ignored because both axes are already resolved, and every card renders
   as an 800px-tall box with the artwork stranded at the bottom. */
.tpl-card .tpl-cover { height: auto; object-fit: contain; }
.tpl-card h3 {
  font-size: 16px;
  letter-spacing: -0.012em;
  margin: 14px 0 0;
}
.tpl-card p {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-4);
  margin: 6px 0 0;
}
.tpl-card figcaption {
  font-size: 14px;
  color: var(--ink-3);
  margin-top: 12px;
}
.tpl-dl {
  display: inline-block;
  margin-top: auto;
  padding-top: 10px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue);
}

/* ========== The pivot ========== */
.tpl-pivot { background: var(--paper); }
.tpl-pivot h2 { margin-top: 16px; }
.tpl-pivot p {
  margin-top: 20px;
  max-width: 62ch;
  font-size: var(--t-body-lg);
  line-height: 1.5;
  color: var(--ink-2);
}
/* Selector is deliberately as specific as `.tpl-pivot p` (two classes) so it
   wins on source order rather than on !important. Anything more specific
   here and the plain .tpl-aside instances elsewhere on the page stop
   matching. */
.tpl-pivot .tpl-aside,
.tpl-edit .tpl-aside,
.tpl-plans .tpl-aside,
.tpl-aside {
  font-size: var(--t-body);
  color: var(--ink-4);
}
/* styles.css leaves in-copy anchors inheriting their parent's colour, which
   on the grey asides makes the link the same colour as the sentence around
   it — no affordance at all. Underline plus the brand blue, so it does not
   rely on colour alone. */
.tpl-aside a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ========== Screenshot figures ==========
   The three format shots are phone-shaped LinkedIn captures at wildly
   different pixel dimensions (936x1428, 940x1418, 920x1406). Height is
   left to the intrinsic ratio rather than fixed, so none of them is
   squashed; the widths match closely enough that the row stays even. */
.tpl-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.tpl-shot { margin: 0; }
.tpl-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-xl);
  border: 1px solid var(--rule);
  background: var(--white);
}
.tpl-shot figcaption {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 42ch;
}
.tpl-shot figcaption strong { color: var(--ink); }
.tpl-shot-wide { margin-top: 48px; }
.tpl-shot-wide figcaption { max-width: 64ch; }
.tpl-note {
  margin-top: 32px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
}

/* ========== Numbered steps ========== */
.tpl-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.tpl-steps li { padding-top: 24px; border-top: 1px solid var(--rule); }
.tpl-step-n {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  color: var(--blue);
}
.tpl-steps h3,
.tpl-pro-step h3 {
  font-size: 20px;
  letter-spacing: -0.016em;
  margin: 14px 0 0;
}
.tpl-steps p,
.tpl-pro-step p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* ========== Edit section ========== */
.tpl-edit { background: var(--paper); }
.tpl-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.tpl-edit-list h3 { font-size: 22px; letter-spacing: -0.018em; margin: 0; }
.tpl-edit-list ul { margin: 20px 0 0; padding-left: 20px; }
.tpl-edit-list li {
  margin-top: 12px;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink-2);
}
.tpl-edit-list .tpl-aside { margin-top: 24px; }

/* ========== Pro flow ========== */
.tpl-pro-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 48px;
}
.tpl-pro-step { padding-top: 24px; border-top: 1px solid var(--rule); }

/* ========== Plan table ========== */
.tpl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-body);
}
.tpl-table th,
.tpl-table td {
  text-align: left;
  padding: 16px 12px;
  border-bottom: 1px solid var(--rule);
}
.tpl-table thead th {
  font-family: var(--mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  font-weight: 400;
}
.tpl-table tbody th { font-weight: 500; color: var(--ink); }
.tpl-table td { color: var(--ink-3); }
.tpl-plans .tpl-aside { margin-top: 24px; }

/* ========== Responsive ==========
   The three-up screenshot row is the first thing to break: at tablet the
   captures get too narrow to read the type inside them, so it drops to
   one column rather than two — two columns would leave an orphan. */
@media (max-width: 1000px) {
  .tpl-steps,
  .tpl-pro-flow { grid-template-columns: repeat(2, 1fr); }
  .tpl-split { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 760px) {
  .tpl-hero { padding: 56px 0 48px; }
  .tpl-grid-3 { grid-template-columns: 1fr; gap: 40px; }
  .tpl-steps,
  .tpl-pro-flow { grid-template-columns: 1fr; gap: 24px; }
  .tpl-shot figcaption { max-width: none; }
}