/* ─────────────────────────────────────────────
   Inglês com Luana — theme styles
   Colours, fonts, sizes and spacing come from theme.json; this file adds the
   hand-made details and the layouts core blocks can't express on their own.
   Loaded on the front end and in the editor.
   ───────────────────────────────────────────── */

:root {
  --paper: var(--wp--preset--color--paper);
  --ink: var(--wp--preset--color--ink);
  --muted: var(--wp--preset--color--muted);
  --hair: var(--wp--preset--color--hair);
  --accent: var(--wp--preset--color--accent);
  --spine: rgba(0, 0, 0, .10);

  --display: var(--wp--preset--font-family--display);
  --text: var(--wp--preset--font-family--text);
  --hand: var(--wp--preset--font-family--hand);

  --head-h: var(--wp--custom--header-height, 64px);
  --wobbly: 255px 15px 225px 15px / 15px 225px 15px 255px;
  color-scheme: light;
}

/* Dark mode: white ink on black paper. Overriding the presets re-colours every block. */
:root[data-theme="dark"],
:root[data-theme="dark"] body {
  --wp--preset--color--paper: #0b0b0b;
  --wp--preset--color--ink: #f3f1ec;
  --wp--preset--color--muted: #a6a6a6;
  --wp--preset--color--hair: #333333;
  --wp--preset--color--accent: #b3c78f;
  --spine: rgba(255, 255, 255, .08);
  color-scheme: dark;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 8px); }
body {
  -webkit-font-smoothing: antialiased;
  transition: background-color .35s ease, color .35s ease;
}
img { height: auto; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wp-site-blocks > * + * { margin-block-start: 0; }
.site-main { padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 7vw, 6rem); }
.site-main.is-landing { padding-block: 0; }

/* ───────── Header ───────── */

.masthead {
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
  transition: border-color .25s ease, background-color .35s ease;
}
.has-sticky-header .masthead { position: sticky; top: 0; }
.admin-bar.has-sticky-header .masthead { top: 32px; }
@media (max-width: 782px) { .admin-bar.has-sticky-header .masthead { top: 46px; } }
@media (max-width: 600px) { .admin-bar.has-sticky-header .masthead { top: 0; } }
.masthead.is-scrolled { border-bottom-color: var(--ink); }

.masthead__inner { min-height: var(--head-h); gap: 1rem; margin-inline: auto; }
.masthead .brand {
  margin: 0;
  font-variation-settings: "SOFT" 50, "opsz" 36;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.masthead__nav { gap: clamp(.5rem, 1.6vw, 1.25rem); flex-shrink: 0; }
.masthead__actions { gap: clamp(.5rem, 1.6vw, 1.25rem); }
.masthead .wp-block-navigation a:hover { text-decoration: underline; text-underline-offset: 3px; }

.masthead__signup .wp-block-button__link {
  padding: .42rem .95rem;
  font-size: .95rem;
}

/* WhatsApp buttons: the glyph is a mask so it takes the text colour. */
.is-style-whatsapp .wp-block-button__link::before,
.is-style-whatsapp-link .wp-block-button__link::before {
  content: "";
  flex: none;
  width: 1.25em;
  height: 1.25em;
  background: currentColor;
  -webkit-mask: var(--wa-glyph) center / contain no-repeat;
  mask: var(--wa-glyph) center / contain no-repeat;
  transition: background-color .2s;
}
:root {
  --wa-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E");
}
.is-style-whatsapp .wp-block-button__link { display: inline-flex; align-items: center; gap: .55rem; }

.is-style-whatsapp-link .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem 0;
  line-height: 1.2;
  border: 0;
  background: none;
  color: inherit;
  font-weight: 400;
  font-size: 1rem;
  font-variant-numeric: lining-nums tabular-nums;
}
.is-style-whatsapp-link .wp-block-button__link:hover,
.is-style-whatsapp-link .wp-block-button__link:focus-visible {
  background: none;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.is-style-whatsapp-link .wp-block-button__link:hover::before { background: #25d366; }

/* Outline buttons: pill outline that fills with ink on hover. */
.wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  padding: .75rem 1.3rem;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.theme-toggle {
  appearance: none;
  border: 0;
  background: none;
  color: inherit;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  cursor: pointer;
  flex: none;
}
.theme-toggle svg { width: 22px; height: 22px; transition: transform .45s ease; }
:root[data-theme="dark"] .theme-toggle svg { transform: rotate(180deg); }
.theme-toggle:hover { background: var(--hair); }

/* ───────── Footer ───────── */

.site-footer { padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right); }
.colophon {
  margin-inline: auto;
  padding: 1.5rem 0 2.5rem;
  border-top: 1px solid var(--hair);
  font-size: .85rem;
  color: var(--muted);
}
.colophon p { margin: 0; }
.colophon .is-style-whatsapp-link .wp-block-button__link { font-size: .85rem; }

/* ───────── Block styles (reusable anywhere) ───────── */

.is-style-kicker {
  margin-block: 0 .5rem;
  font-family: var(--text);
  font-size: .72rem !important;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
}
.is-style-hand {
  font-family: var(--hand);
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--muted);
}
.is-style-lead {
  max-width: 34ch;
  font-family: var(--display);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  line-height: 1.3;
  font-variation-settings: "SOFT" 50, "opsz" 48;
}
.is-style-note {
  display: inline-block;
  padding: .3rem .7rem;
  font-size: .85rem;
  color: var(--muted);
  border: 1px dashed var(--muted);
  border-radius: 4px;
}
.hide-prototype-notes .is-style-note { display: none; }

.wp-block-heading.is-style-section,
h1.is-style-section {
  margin: 0;
  font-weight: 800;
  font-size: var(--wp--preset--font-size--xx-large);
  line-height: 1;
  letter-spacing: -.02em;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}

/* Prices: the theme turns "R$ 380/mês" into these spans. */
.price {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums;
  font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144;
  white-space: nowrap;
}
.price__cur {
  font-size: .42em;
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: .95em;
  margin-right: .18em;
}
.price__per { margin-left: .2rem; font-size: .9rem; color: var(--muted); }
p.is-style-price { margin-block: .6rem .4rem; }
.price--big .price { font-size: clamp(4rem, 7vw, 5.6rem); }

.wp-block-table.is-style-prices table { width: 100%; border-collapse: collapse; table-layout: auto; }
.wp-block-table.is-style-prices th,
.wp-block-table.is-style-prices td { border: 0; }
.wp-block-table.is-style-prices thead { border-bottom: 3px solid var(--ink); }
.wp-block-table.is-style-prices thead th {
  padding: .5rem .5rem .6rem;
  text-align: left;
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
}
.wp-block-table.is-style-prices tbody tr { border-bottom: 1px solid var(--hair); }
.wp-block-table.is-style-prices td { padding: 1.3rem .5rem; vertical-align: middle; }
.wp-block-table.is-style-prices td:first-child {
  padding-left: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.15;
}
.wp-block-table.is-style-prices td:first-child em {
  display: block;
  font-family: var(--text);
  font-style: normal;
  font-weight: 400;
  font-size: .95rem;
  color: var(--muted);
}

/* Numbered cards: every direct child gets 01, 02, 03… */
.is-style-numbered {
  counter-reset: icl-item;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
  gap: 2rem clamp(1.25rem, 2.2vw, 2rem);
}
.is-style-numbered > * {
  counter-increment: icl-item;
  margin: 0 !important;
  padding-top: 1rem;
  border-top: 1px solid var(--ink);
}
.is-style-numbered > *::before {
  content: counter(icl-item, decimal-leading-zero);
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--accent);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  font-variant-numeric: lining-nums;
}
.is-style-numbered h3 {
  margin: .75rem 0 .5rem;
  font-size: 1.22rem;
  line-height: 1.2;
  font-variation-settings: "SOFT" 80;
}
.is-style-numbered p { margin: 0; font-size: 1.02rem; line-height: 1.55; text-wrap: pretty; }

/* Ruled columns: each direct child sits under a thick rule. */
.is-style-ruled {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1.5rem clamp(1.25rem, 2.2vw, 2rem);
}
.is-style-ruled > * { margin: 0 !important; padding-top: .9rem; border-top: 3px solid var(--ink); }
.is-style-ruled p { margin: 0; font-size: 1.05rem; line-height: 1.5; text-wrap: pretty; }
.is-style-ruled .is-style-kicker { margin-bottom: .4rem; }

/* Hand-drawn boxes. main.js draws them with rough.js; this is the no-JS look. */
.is-style-sketch, .is-style-sketch-shade { position: relative; padding: 2rem 1.5rem 1.8rem; }
.is-style-sketch > :not(.rough), .is-style-sketch-shade > :not(.rough) { position: relative; z-index: 1; }
.is-style-sketch:not(.is-sketched), .is-style-sketch-shade:not(.is-sketched) {
  border: 2px solid var(--ink);
  border-radius: var(--wobbly);
}
.is-style-sketch-shade:not(.is-sketched) { box-shadow: 9px 10px 0 color-mix(in srgb, var(--accent) 45%, transparent); }

.rough {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.rough .line  { stroke: var(--ink); }
.rough .fill  { fill: var(--paper); stroke: none; }
.rough .shade { stroke: var(--accent); fill: none; opacity: .6; }

.wp-block-image.is-style-portrait img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--hair); }
.wp-block-image.is-style-portrait figcaption { margin-top: .7rem; text-align: left; }
.wp-block-image.is-style-portrait figcaption strong { color: var(--ink); font-weight: 600; }

/* ───────── Sections ───────── */

.icl-section {
  padding-block: clamp(48px, 7vw, 96px) clamp(64px, 9vw, 128px);
  border-top: 1px solid var(--ink);
}
.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head > * { margin-block: 0; }
.section-sub, .icl-subhead-en {
  margin-block: .6rem 0 !important;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  transform: rotate(-1.5deg);
  transform-origin: left;
}
.icl-subhead {
  margin: 0;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  line-height: 1.05;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 96;
}
.icl-subhead-en { margin-block: .35rem 1.25rem !important; font-size: clamp(1.15rem, 2vw, 1.55rem); }

/* Meet Luana — magazine spread */
.icl-spread {
  padding-block: clamp(28px, 5vw, 64px) clamp(48px, 7vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) clamp(36px, 5vw, 84px) minmax(0, 1.2fr);
  grid-template-areas:
    "oi oi sp ph"
    "pt en sp ph"
    "pt en sp pq";
  grid-template-rows: auto auto 1fr;
}
.icl-spread > * { margin-block: 0 !important; }
.icl-spread::before {
  content: "";
  grid-area: sp;
  background: linear-gradient(to right, transparent 0 40%, var(--spine) 50%, transparent 60% 100%);
}

.icl-hello { grid-area: oi; position: relative; padding-block: clamp(1.25rem, 3vw, 2.5rem); }
.icl-hello > * { margin-block: 0; }
.icl-hello__title {
  margin: 0;
  font-weight: 900;
  font-size: var(--wp--preset--font-size--huge);
  line-height: .78;
  letter-spacing: -.05em;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  margin-left: -.04em;
}
.icl-hello__title mark { margin-left: .02em; }
.icl-hello > .icl-hello__aside {
  position: absolute;
  left: calc(var(--wp--preset--font-size--huge) * 1.25 + 60px); /* just past the "!" at any size */
  top: clamp(1.5rem, 4vw, 3.5rem);
  margin: 0;
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1;
  transform: rotate(-5deg);
  white-space: nowrap;
}
.icl-hello__aside::before {
  content: "";
  position: absolute;
  width: 72px;
  height: 48px;
  left: -58px;
  top: 30px;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 60'%3E%3Cpath d='M86 8 C 60 4, 30 14, 14 44 M14 44 L 10 28 M14 44 L 29 38' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 60'%3E%3Cpath d='M86 8 C 60 4, 30 14, 14 44 M14 44 L 10 28 M14 44 L 29 38' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.icl-hello .is-style-lead { margin-top: clamp(1.25rem, 2.5vw, 2rem); max-width: 30ch; font-size: clamp(1.25rem, 2vw, 1.6rem); }

.bio { font-size: 1.08rem; line-height: 1.62; }
.bio > * { margin-block: 0 1em; }
.bio p { font-style: italic; text-wrap: pretty; hyphens: auto; }
.bio--pt { grid-area: pt; padding-right: clamp(1rem, 2vw, 1.8rem); }
.bio--en { grid-area: en; padding-left: clamp(1rem, 2vw, 1.8rem); border-left: 1px solid var(--hair); }

.bio__label {
  display: inline-block;
  margin-bottom: 1rem !important;
  font-style: normal !important;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  padding-bottom: .15rem;
  background: linear-gradient(var(--accent), var(--accent)) left bottom / 100% 2px no-repeat;
}
.bio__lead {
  font-family: var(--display);
  font-style: normal !important;
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.2;
  font-variation-settings: "SOFT" 80, "WONK" 1;
}
.bio--en .bio__lead { font-style: italic !important; font-weight: 500; }
.bio__aside { font-family: var(--hand); font-style: normal !important; font-size: 1.45rem; line-height: 1.1; color: var(--accent); margin-top: 1.4em !important; }
.bio .has-drop-cap:not(:focus)::first-letter {
  float: left;
  font-family: var(--display);
  font-style: normal;
  font-weight: 900;
  font-size: 4.1em;
  line-height: .8;
  margin: 0;
  padding: .07em .08em 0 0;
  text-transform: none;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}
.signature {
  font-family: var(--hand);
  font-style: normal !important;
  font-size: 2rem;
  line-height: 1;
  transform: rotate(-3deg);
  transform-origin: left;
}

.portrait { grid-area: ph; position: relative; margin-top: clamp(1.25rem, 3vw, 2.5rem) !important; }
.portrait > .wp-block-image { margin: 0; }
.portrait > .portrait__note {
  position: absolute;
  right: -.4rem;
  top: -1.2rem;
  margin: 0;
  padding: .1rem .7rem .2rem;
  background: var(--paper);
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.1;
  transform: rotate(4deg);
  border: 1.5px solid var(--ink);
  border-radius: var(--wobbly);
  z-index: 1;
}

.pullquote {
  grid-area: pq;
  align-self: end;
  margin-top: 2.25rem !important;
  padding-top: 1.25rem;
  border-top: 3px solid var(--ink);
}
.pullquote__q {
  margin: 0 0 .3rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  line-height: 1.15;
  font-variation-settings: "SOFT" 100, "opsz" 72;
}
.pullquote__src { margin: .8rem 0 0; font-family: var(--hand); font-size: 1.45rem; color: var(--muted); }

/* Lessons */
.icl-offer__lead { margin-block: 0 clamp(2.5rem, 5vw, 4rem) !important; max-width: 34ch; font-size: clamp(1.4rem, 2.4vw, 2rem); }

/* Levels */
.icl-levels { margin-top: clamp(4rem, 8vw, 7rem) !important; gap: clamp(2rem, 5vw, 5rem); }
.icl-levels p { max-width: 44ch; text-wrap: pretty; }
.icl-levels__goals { color: var(--muted); }
.icl-levels__goals strong { color: var(--ink); }

.icl-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: clamp(.75rem, 1.6vw, 1.25rem);
  align-items: end;
}
.icl-steps > * { display: flex; flex-direction: column; margin: 0 !important; --lv: 1; }
.icl-steps > :nth-child(2) { --lv: 2; }
.icl-steps > :nth-child(3) { --lv: 3; }
.icl-steps > :nth-child(4) { --lv: 4; }
.icl-steps > :nth-child(5) { --lv: 5; }
.icl-steps > :nth-child(6) { --lv: 6; }
.icl-steps > *::before, .icl-step__bar {
  content: "";
  display: block;
  position: relative;
  height: calc(var(--lv) * 3rem + 1.5rem);
  margin-bottom: .8rem;
  order: -1;
}
.icl-steps > *::before {
  border: 2px solid var(--ink);
  border-radius: var(--wobbly);
  background: repeating-linear-gradient(-41deg, color-mix(in srgb, var(--accent) 55%, transparent) 0 1.5px, transparent 1.5px 7px);
}
.icl-steps > .has-bar::before { display: none; }
.icl-steps p { margin: 0; }
.icl-steps__pt {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.15;
  min-height: 2.3em;
  font-variation-settings: "SOFT" 80;
}
.icl-steps__en { font-family: var(--hand); font-size: 1.3rem; line-height: 1.1; color: var(--muted); }

/* Prices */
.icl-prices { margin-top: clamp(4rem, 8vw, 7rem) !important; }
.icl-prices > .wp-block-columns { gap: clamp(2.5rem, 5vw, 5rem); }
.icl-price-card { text-align: center; transform: rotate(-1.6deg); max-width: 340px; }
.icl-price-card p { margin: 0; }
.icl-price-card .is-style-hand { font-size: 1.5rem; }
.icl-included { margin-top: clamp(2rem, 4vw, 3rem); max-width: 62ch; font-size: 1.12rem; line-height: 1.55; }
.icl-included strong {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  padding-bottom: .05em;
  margin-right: .25em;
  background: linear-gradient(var(--accent), var(--accent)) left 92% / 100% 3px no-repeat;
}

/* Terms */
.icl-terms { margin-top: clamp(4rem, 8vw, 7rem) !important; }
.icl-terms .is-style-note { margin-top: 1.75rem; }

/* Contact */
.icl-cta {
  margin-top: clamp(4rem, 8vw, 7rem) !important;
  margin-bottom: clamp(4rem, 8vw, 7rem) !important;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--ink);
}
.icl-cta p { font-size: 1.15rem; max-width: 46ch; margin-block: 0; }
.icl-cta .icl-cta__hand {
  margin-bottom: .3rem;
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1;
  color: var(--ink);
  transform: rotate(-2deg);
  transform-origin: left;
}
.icl-cta .wp-block-buttons { gap: .8rem; }
.icl-cta .icl-fine { margin-top: 1.5rem; font-size: .88rem; color: var(--muted); }

/* Testimonials (icl/testimonials block) — scoped to beat the plugin's baseline styles. */
.wp-block-icl-testimonials .bubbles {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: clamp(3rem, 5vw, 4.5rem) clamp(2.75rem, 5vw, 5rem);
}
.wp-block-icl-testimonials .bubble-item { position: relative; z-index: 1; }
.wp-block-icl-testimonials .bubble-item:nth-child(3n+1) { transform: rotate(-1.4deg); }
.wp-block-icl-testimonials .bubble-item:nth-child(3n+2) { transform: translateY(1.75rem) rotate(1deg); }
.wp-block-icl-testimonials .bubble-item:nth-child(3n)   { transform: translateY(.4rem) rotate(-.6deg); }
.wp-block-icl-testimonials .bubble {
  position: relative;
  margin: 0;
  padding: 1.5rem 1.6rem 1.4rem;
  border: 2px solid var(--ink);
  border-radius: var(--wobbly);
}
.wp-block-icl-testimonials .bubble.is-sketched { border-color: transparent; }
.wp-block-icl-testimonials .bubble blockquote { position: relative; z-index: 1; margin: 0; padding: 0; border: 0; font-family: inherit; font-style: normal; font-size: inherit; }
.wp-block-icl-testimonials .bubble blockquote p { margin: 0; font-size: 1.12rem; line-height: 1.5; text-wrap: pretty; }
.wp-block-icl-testimonials .bubble blockquote[lang="en"] p { font-style: italic; }
.wp-block-icl-testimonials .who {
  margin: 2.1rem 0 0;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.55rem;
  line-height: 1.05;
}
.wp-block-icl-testimonials .who span { display: block; font-weight: 500; font-size: .8em; color: var(--muted); opacity: 1; }
.wp-block-icl-testimonials .bubble-item[data-tail="right"] .who { text-align: right; }
.connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.connectors path { stroke: var(--ink); }
.wp-block-icl-testimonials .is-style-note { margin: 0 0 2.5rem; }

/* ───────── Blog, posts and pages ───────── */

.site-main .wp-block-post-title { margin-block: 0 1.5rem; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; }
.post-meta { gap: .4rem 1rem; color: var(--muted); font-size: var(--wp--preset--font-size--small); }
.post-meta > * { margin: 0; }
.post-meta .is-style-kicker { margin: 0; }
.post-tags { color: var(--muted); }
.post-nav { margin-top: 3rem !important; padding-top: 1.25rem; border-top: 1px solid var(--ink); gap: 1rem; }
.post-nav a { text-decoration: none; font-family: var(--display); font-weight: 600; }

.icl-posts .wp-block-post-template { gap: clamp(2rem, 4vw, 3rem); }
.icl-posts .wp-block-post { padding-top: 1rem; border-top: 1px solid var(--ink); }
.icl-posts .wp-block-post > * { margin-block: 0 .6rem; }
.icl-posts .wp-block-post-featured-image { margin-bottom: 1rem; }
.icl-posts .wp-block-post-title { margin: 0 0 .5rem; font-weight: 700; line-height: 1.15; }
.icl-posts .wp-block-post-title a:hover { color: var(--accent); }
.icl-posts .wp-block-post-date.is-style-kicker { color: var(--accent); }
.wp-block-query-pagination { margin-top: 3rem; }

.icl-comments { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--ink); }
.icl-comment { padding-block: 1rem; border-bottom: 1px solid var(--hair); }
.icl-comment .wp-block-comment-author-name { font-family: var(--hand); font-size: 1.4rem; font-weight: 700; }
.icl-comment .wp-block-comment-date { color: var(--muted); font-size: var(--wp--preset--font-size--small); }
/* Form controls from any plugin (contact forms, newsletters, bookings…) match the site. */
.site-main :where(input:not([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [type=file], [type=hidden], [type=range], [type=color]), textarea, select),
.icl-search .wp-block-search__input {
  max-width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  padding: .6rem .8rem;
  font: inherit;
}
.site-main :where(textarea, input:not([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [type=file], [type=hidden], [type=range], [type=color])) { width: 100%; max-width: 36rem; }
.site-main :where(input, textarea, select):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.site-main :where(input[type=submit], input[type=button], button[type=submit]):not(.wp-element-button, .icl-slots__btn, .icl-slots__choice, .theme-toggle) {
  appearance: none;
  padding: .75rem 1.3rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
}
.site-main :where(input[type=submit], input[type=button], button[type=submit]):not(.wp-element-button, .icl-slots__btn, .icl-slots__choice, .theme-toggle):hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.site-main :where(fieldset) { border: 1px solid var(--hair); border-radius: 6px; }
.site-main :where(label) { font-weight: 500; }
.icl-search { max-width: 30rem; }
.icl-search .wp-block-search__button { margin-left: .5rem; }

.icl-404 { padding-block: 2rem 4rem; }
.icl-404 .icl-hello__title { font-size: clamp(5rem, 14vw, 10rem); margin-bottom: 2rem; }

/* Entry content gets the same hand-made accents. */
.wp-block-post-content :where(h2, h3) { font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 96; }
.wp-block-post-content :where(blockquote) p { margin-block: .4em; }
.wp-block-post-content :where(.has-drop-cap):not(:focus)::first-letter {
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}

/* ───────── Responsive ───────── */

@media (max-width: 1080px) {
  .icl-spread {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "oi ph"
      "pt en"
      "pq pq";
    grid-template-rows: auto;
  }
  .icl-spread::before { display: none; }
  .portrait { margin-left: 1.8rem !important; }
  .icl-hello > .icl-hello__aside { left: auto; right: 0; top: auto; bottom: 30%; }
  .icl-hello__aside::before { display: none; }
  .pullquote { margin-top: 1.5rem !important; }
}

@media (max-width: 720px) {
  body { font-size: 1.1rem; }
  .masthead .is-style-whatsapp-link .wp-block-button__link { font-size: 0; gap: 0; }
  .masthead .is-style-whatsapp-link .wp-block-button__link::before { width: 22px; height: 22px; }
  .masthead .wp-block-buttons > .masthead__signup { display: none; } /* the same link is in the contact section */
  .masthead .brand { white-space: normal; line-height: 1.15; font-size: 1rem; overflow: visible; }

  .icl-spread { grid-template-columns: minmax(0, 1fr); grid-template-areas: "oi" "ph" "pt" "en" "pq"; }
  .icl-hello > .icl-hello__aside { position: static; display: inline-block; margin-top: 1rem !important; transform: rotate(-4deg); }
  .portrait { margin: .5rem 0 2.5rem !important; }
  .bio--pt { padding-right: 0; }
  .bio--en { padding: 1.75rem 0 0; margin-top: 1rem !important; border-left: 0; border-top: 1px solid var(--hair); }

  .wp-block-icl-testimonials .bubble-item:nth-child(n) { transform: rotate(0); }
  .wp-block-icl-testimonials .bubble-item:nth-child(odd) { transform: rotate(-1deg); margin-right: 1.5rem; }
  .wp-block-icl-testimonials .bubble-item:nth-child(even) { transform: rotate(1deg); margin-left: 1.5rem; }

  .icl-steps { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .icl-steps > *::before, .icl-step__bar { height: 2.6rem; width: calc(var(--lv) * 20% + 10%); margin-bottom: .45rem; }
  .icl-steps__pt { min-height: 0; }
  .wp-block-table.is-style-prices td:first-child { font-size: 1.05rem; padding-right: .5rem; }
  .wp-block-table.is-style-prices td { padding: 1.1rem .25rem; }
  .price__per { display: block; margin: .2rem 0 0; }
  .icl-cta .wp-block-buttons { flex-direction: column; align-items: stretch; }
  .icl-cta .wp-block-button__link { width: 100%; justify-content: center; }
}

@media (max-width: 380px) {
  .masthead__nav, .masthead__actions { gap: .25rem; }
  .masthead .brand { font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body, .masthead, .theme-toggle svg { transition: none; }
}