/* ==========================================================================
   Voyamore — Article Blocks
   Shared styling for the patterns + variations the editor inserts inside
   any editorial article wrapper (.vym-deal-article, .vym-explore-article,
   .story-article — all use the same marker classes here).

   Block CSS targets the marker classes directly so the styles work
   inside any wrapper. Native CSS nesting is used.
   ========================================================================== */

/* ==========================================================================
   .vym-callout — Callout pattern (Group block with class vym-callout)

   Markup the pattern emits:
     <div class="wp-block-group vym-callout">
       <h4>Pro tip</h4>
       <p>...</p>
     </div>

   The first heading inside becomes the small uppercase label with the
   bullseye marker glyph; subsequent paragraphs are the body.
   ========================================================================== */

.vym-callout {
  background: var(--vym-surface);
  border: 1px solid var(--vym-border);
  border-radius: 14px;
  padding: 22px 26px;
  margin: 28px 0;
  font-family: var(--vym-font-ui);
  font-size: 16px;
  line-height: 1.65;
  color: var(--vym-text);

  & > :first-child { margin-top: 0; }
  & > :last-child  { margin-bottom: 0; }

  /* Heading at any level → small uppercase label with bullseye glyph.
     Overrides any auto-counter (sec) the article wrapper might set. */
  & h2,
  & h3,
  & h4,
  & h5,
  & h6 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--vym-muted);
    margin: 0 0 12px;
    line-height: 1.2;

    &::before {
      content: "";
      counter-increment: none;
      display: inline-block;
      width: 14px;
      height: 14px;
      margin: 0;
      border: 1.5px solid var(--vym-accent);
      border-radius: 50%;
      background: radial-gradient(circle at center, var(--vym-accent) 0 2px, transparent 2px);
      color: transparent;
      flex-shrink: 0;
    }
  }

  & p {
    margin: 0 0 10px;
    color: var(--vym-text);
  }
  & p:last-child { margin-bottom: 0; }

  /* Definition rows: <li><span>Label</span><strong>Value</strong></li>.
     Lets a callout stand in for the old .fact-card without another
     component — a plain list block renders as a normal bulleted list,
     and this style turns it into aligned label/value pairs. */
  & ul.is-style-facts {
    list-style: none;
    padding: 0;
    margin: 0;

    & li {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 14px;
      padding: 7px 0;
      border-bottom: 1px dashed var(--vym-border);
      font-size: 14px;
    }
    & li:last-child { border-bottom: 0; }
    & li > span   { color: var(--vym-muted); }
    & li > strong { font-weight: 600; text-align: right; }
  }
}

/* ---- Tones ---------------------------------------------------------------
   One component, four moods. Replaces what used to be three separate
   components (.callout with info/warn/tip, .canada, and .fact-card) — all
   of them were "a titled box with content" wearing different markup.
   Switchable from the block sidebar via the registered block styles. */

.vym-callout.is-style-info {
  border-left: 3px solid var(--vym-accent);
}
.vym-callout.is-style-info :where(h2,h3,h4,h5,h6)::before {
  border-color: var(--vym-accent);
  background: radial-gradient(circle at center, var(--vym-accent) 0 2px, transparent 2px);
}

.vym-callout.is-style-warn {
  border-left: 3px solid #c0492e;
  background: color-mix(in srgb, #c0492e 5%, var(--vym-surface));
}
.vym-callout.is-style-warn :where(h2,h3,h4,h5,h6) { color: #c0492e; }
.vym-callout.is-style-warn :where(h2,h3,h4,h5,h6)::before {
  border-color: #c0492e;
  background: radial-gradient(circle at center, #c0492e 0 2px, transparent 2px);
}

.vym-callout.is-style-tip {
  border-left: 3px solid #2a7d5a;
  background: color-mix(in srgb, #2a7d5a 5%, var(--vym-surface));
}
.vym-callout.is-style-tip :where(h2,h3,h4,h5,h6) { color: #2a7d5a; }
.vym-callout.is-style-tip :where(h2,h3,h4,h5,h6)::before {
  border-color: #2a7d5a;
  background: radial-gradient(circle at center, #2a7d5a 0 2px, transparent 2px);
}

/* Canada note — the one tone that earns a literal glyph over the dot,
   because it marks content specific to Canadian readers. */
.vym-callout.is-style-canada {
  border-left: 3px solid #d52b1e;
  background: color-mix(in srgb, #d52b1e 4%, var(--vym-surface));
}
.vym-callout.is-style-canada :where(h2,h3,h4,h5,h6) { color: #d52b1e; }
.vym-callout.is-style-canada :where(h2,h3,h4,h5,h6)::before {
  content: "\1F341";               /* maple leaf */
  border: 0;
  background: none;
  border-radius: 0;
  color: initial;
  font-size: 13px;
  line-height: 1;
}

/* color-mix has broad but not total support; without it the tint is
   dropped and the left border alone carries the tone. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .vym-callout.is-style-warn,
  .vym-callout.is-style-tip,
  .vym-callout.is-style-canada { background: var(--vym-surface); }
}

/* ==========================================================================
   Tick list — core/list with the "Ticks" style.
   Replaces .tick-list. Bold lead-in stays a plain <strong> the editor
   types, so the block is a normal list with no markup convention to learn.
   ========================================================================== */

.wp-block-list.is-style-ticks,
ul.is-style-ticks {
  list-style: none;
  padding-left: 0;

  & > li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.45em;
      width: 15px;
      height: 9px;
      border-left: 2px solid var(--vym-accent);
      border-bottom: 2px solid var(--vym-accent);
      transform: rotate(-45deg);
    }
    &:last-child { margin-bottom: 0; }
  }
}

/* ==========================================================================
   Native Columns inside an article — used for the old .fact-duo,
   .season-grid and .card-grid, so those three need no component of
   their own. Just tightens spacing and lets them stack sensibly.
   ========================================================================== */

:where(.vym-explore-article, .vym-deal-article, .story-article) .wp-block-columns {
  gap: 18px;
  margin: 28px 0;
}
:where(.vym-explore-article, .vym-deal-article, .story-article) .wp-block-columns .vym-callout {
  margin: 0;
  height: 100%;
}
@media (max-width: 640px) {
  :where(.vym-explore-article, .vym-deal-article, .story-article) .wp-block-columns {
    gap: 14px;
  }
}

/* ==========================================================================
   .vym-sample-dates — Sample Dates table pattern (core/table with marker)

   Tighter typography than the body, monospace-ish numerals, accent header.
   ========================================================================== */

.wp-block-table.vym-sample-dates,
.vym-sample-dates {
  margin: 32px 0;

  & table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--vym-font-ui);
    font-size: 14px;

    & thead th {
      font-family: var(--font);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--vym-accent);
      padding: 10px 12px;
      border-bottom: 2px solid var(--vym-accent);
      text-align: left;
    }

    & tbody td {
      padding: 12px 12px;
      border-bottom: 1px dashed var(--vym-border);
      vertical-align: middle;
      color: var(--vym-text);

      /* Price column gets the display-font treatment. */
      &:nth-child(2) {
        font-family: var(--vym-font-display);
        font-weight: 600;
        font-size: 16px;
        letter-spacing: -0.005em;
      }
    }

    & tbody tr:last-child td { border-bottom: 0; }

    & tbody tr {
      transition: background 0.18s var(--vym-ease);
      &:hover { background: var(--vym-glass); }
    }
  }
}

/* ==========================================================================
   .vym-booking-steps — Booking Steps pattern (ordered list with marker)

   Larger numerals in accent colour. Each step gets a little breathing
   room. Works inside any article scope.
   ========================================================================== */

ol.vym-booking-steps,
.wp-block-list.vym-booking-steps {
  list-style: none;
  counter-reset: vym-step;
  padding-left: 0;
  margin: 28px 0;

  & > li {
    position: relative;
    padding-left: 48px;
    margin-bottom: 18px;
    min-height: 32px;
    counter-increment: vym-step;

    &::before {
      content: counter(vym-step, decimal-leading-zero);
      position: absolute;
      left: 0;
      top: 0;
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: var(--vym-accent);
      color: var(--vym-pill-fg);
      font-family: var(--font);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
    }

    &:last-child { margin-bottom: 0; }
  }
}

/* ==========================================================================
   Block variations (registered in variations.js)
   ========================================================================== */

/* ---- Voyamore Pull Quote — .is-style-voyamore on core/pullquote ---- */
.wp-block-pullquote.is-style-voyamore {
  margin: 56px -32px;
  padding: 32px;
  border-left: 3px solid var(--vym-accent);
  border-right: 0;
  border-top: 0;
  border-bottom: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  font-family: var(--vym-font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--vym-text);

  & p {
    margin: 0;
    color: inherit;
    font: inherit;
  }

  & cite {
    display: block;
    margin-top: 16px;
    font-family: var(--font);
    font-style: normal;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vym-muted);
  }
}

/* ---- Dashed divider — .is-style-dashed-airy on core/separator ---- */
.wp-block-separator.is-style-dashed-airy,
hr.is-style-dashed-airy {
  border: 0;
  border-top: 1px dashed var(--vym-border);
  margin: 56px 0;
  background: transparent;
  height: 0;
  max-width: none;
}

/* ---- Figure Frame (16:9) — .is-style-frame-16-9 on core/image ---- */
.wp-block-image.is-style-frame-16-9 {
  margin: 36px 0;

  & img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: 14px;
    filter: drop-shadow(0 20px 40px -20px rgba(60, 45, 30, 0.18));
  }

  & figcaption {
    margin-top: 12px;
    font-family: var(--vym-font-ui);
    font-size: 13px;
    color: var(--vym-muted);
    text-align: center;
    line-height: 1.5;
  }
}

/* ==========================================================================
   Responsive — drop the gutter bleeds on narrow screens
   ========================================================================== */

@media (max-width: 720px) {
  .wp-block-pullquote.is-style-voyamore {
    margin-inline: 0;
    padding: 24px;
  }
  .wp-block-separator.is-style-dashed-airy,
  hr.is-style-dashed-airy {
    margin: 40px 0;
  }
  .vym-callout { padding: 18px 20px; }

  ol.vym-booking-steps,
  .wp-block-list.vym-booking-steps {
    & > li {
      padding-left: 42px;

      &::before {
        width: 30px;
        height: 30px;
        font-size: 10px;
      }
    }
  }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .wp-block-pullquote.is-style-voyamore { margin-inline: 0; }
  .wp-block-image.is-style-frame-16-9 img { filter: none; }
  .vym-callout {
    border-color: #000;
    background: transparent;
  }
}