/* ==========================================================================
   Cruise Tools - Landing page, tool frame and card (2.0.0 step 4).
   Prism's design proposal: docs/reviews/2026-10-02-prism-tools-hub/.

   BRAND-NEUTRAL BY CONSTRUCTION: this file sets exactly one colour
   variable, --cruisetools-ct-accent, and no fonts. A host site overrides
   it (e.g. in its own template CSS: `.cruisetools-hub{--cruisetools-ct-accent:#yourcolor}`)
   to take its own look with no code change. The category tile gradients
   (.cruisetools-k1 through .cruisetools-k5) are the one deliberate exception: a neutral five-colour set,
   itself overridable the same way.
   ========================================================================== */

.cruisetools-hub,
.cruisetools-tool-frame {
    --cruisetools-ct-accent: #0258ce;
    --cruisetools-ct-ink: #1a2a3a;
    --cruisetools-ct-muted: #5f6b6d;
    --cruisetools-ct-rule: #e2e7ec;
    --cruisetools-ct-soft: #f4f7fa;
}

/* ---- Shared art tile (generated gradient + glyph, until real art exists) ---- */
.cruisetools-art {
    position: relative;
    display: grid;
    place-items: center;
    color: #fff;
    overflow: hidden;
    border-radius: 8px;
}
.cruisetools-art svg { width: 42%; height: 42%; opacity: .95; }
/* Cortex/Prism's fix, 2026-10-03: the markup (card-render.php's
   cruisetools_art_html()) emits "cruisetools-art cruisetools-k1" (every class
   in this component is cruisetools-* prefixed, no exception) - these
   selectors previously read ".cruisetools-art.k1" (a bare "k1" that matched
   NOTHING), so no gradient ever applied and the white glyph sat on white.
   Fixed in the CSS direction - the markup's own class names were already
   correct and consistent with every other class in this file. */
.cruisetools-k1 { background: linear-gradient(140deg, #2f6f9f, #173d5c); }
.cruisetools-k2 { background: linear-gradient(140deg, #3f8a7a, #1d4a42); }
.cruisetools-k3 { background: linear-gradient(140deg, #7a5a9a, #3d2b52); }
.cruisetools-k4 { background: linear-gradient(140deg, #a0703a, #5a3c1c); }
.cruisetools-k5 { background: linear-gradient(140deg, #5a6f84, #2c3a48); }
.cruisetools-art img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Badge: one shape, three words, no warning colours ---- */
.cruisetools-badge {
    display: inline-block;
    font: 700 10px/1 Arial, sans-serif;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 4px 6px;
    border-radius: 3px;
    border: 1px solid currentColor;
    color: var(--cruisetools-ct-accent);
    background: #fff;
    white-space: nowrap;
}
.cruisetools-badge.cruisetools-badge-new {
    background: var(--cruisetools-ct-accent);
    color: #fff;
    border-color: var(--cruisetools-ct-accent);
}
.cruisetools-art > .cruisetools-badge { position: absolute; top: 8px; left: 8px; }
/* Prism's look review (PR #14, MUST 2): on a phone ROW the badge sits in the
   kicker line (beside "Guide"/"Calculator"), never inside the 64px art tile
   (where it clipped/overlapped the glyph - "UPDATEI", "NEW" overlapping,
   confirmed live). card-render.php's cruisetools_row_html() passes
   includeBadge=false to cruisetools_art_html() and renders this class in
   .cruisetools-row-kicker instead - plain inline flow, no absolute
   positioning, so the rule above never applies to it. */
.cruisetools-row-kicker .cruisetools-badge-row { margin-left: 6px; }
/* 2.12.2: the preview note in the tool frame (breadcrumb.php), shown while a tool's badge is Preview. */
.cruisetools-preview-note { margin: 8px 0 4px; font-size: 14px; line-height: 1.4; }
.cruisetools-preview-note .cruisetools-badge { margin-right: 6px; vertical-align: 1px; }

/* ---- Kick (type label) ---- */
.cruisetools-kick {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cruisetools-ct-muted);
}

/* ---- Featured slot ---- */
.cruisetools-feat {
    display: grid;
    border: 1px solid var(--cruisetools-ct-rule);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    text-decoration: none;
    color: inherit;
    margin-bottom: 16px;
}
.cruisetools-feat .cruisetools-art { aspect-ratio: 16/10; border-radius: 0; }
.cruisetools-feat-body { padding: 12px 14px 14px; display: grid; gap: 4px; }
.cruisetools-feat-body h3 { font-size: 19px; color: var(--cruisetools-ct-ink); line-height: 1.2; margin: 0; }
.cruisetools-feat-body p { margin: 0; font-size: 14px; color: var(--cruisetools-ct-muted); }
.cruisetools-feat-btn {
    display: flex; align-items: center; justify-content: center;
    min-height: 46px; margin-top: 8px; border-radius: 8px;
    background: var(--cruisetools-ct-accent); color: #fff; font-weight: 500; font-size: 15px;
}

/* ---- Jump row ---- */
.cruisetools-jump {
    display: flex; gap: 6px; overflow-x: auto; margin: 14px 0 4px; padding: 0 0 4px;
    flex-wrap: wrap;
}
.cruisetools-jump a {
    flex: none; display: inline-flex; align-items: center; gap: 5px;
    min-height: 36px; padding: 0 12px; border: 1px solid #cdd8e4; border-radius: 18px;
    font-size: 13px; font-weight: 500; color: var(--cruisetools-ct-ink); background: #fff;
    text-decoration: none;
}
.cruisetools-jump a i { font-style: normal; color: var(--cruisetools-ct-muted); font-weight: 400; font-size: 12px; }

/* ---- Category heading ---- */
.cruisetools-cat-heading {
    font-size: 19px; color: var(--cruisetools-ct-ink); margin: 24px 0 2px;
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.cruisetools-cat-heading span { font-size: 12.5px; font-weight: 400; color: var(--cruisetools-ct-muted); }
.cruisetools-cat-note { font-size: 13px; color: var(--cruisetools-ct-muted); margin: 0 0 6px; }

/* ---- Phone rows (default - mobile first) ---- */
.cruisetools-rows { display: grid; }
.cruisetools-row {
    display: grid; grid-template-columns: 64px 1fr 14px; gap: 12px; align-items: center;
    min-height: 84px; padding: 10px 0; border-bottom: 1px solid var(--cruisetools-ct-rule);
    text-decoration: none; color: inherit;
}
.cruisetools-row:last-child { border-bottom: 0; }
.cruisetools-row .cruisetools-art { width: 64px; aspect-ratio: 1; }
.cruisetools-row .cruisetools-art svg { width: 46%; height: 46%; }
.cruisetools-row-title { font-weight: 700; font-size: 15.5px; color: var(--cruisetools-ct-ink); line-height: 1.25; }
.cruisetools-row-kicker { display: flex; gap: 6px; align-items: center; margin-bottom: 3px; }
.cruisetools-row-tagline { font-size: 13px; color: var(--cruisetools-ct-muted); line-height: 1.35; margin-top: 2px; }
.cruisetools-row-chev {
    width: 8px; height: 8px; border-top: 2px solid #9aa6b1; border-right: 2px solid #9aa6b1;
    transform: rotate(45deg);
}
.cruisetools-row.cruisetools-row-more { min-height: 68px; }
.cruisetools-row.cruisetools-row-more .cruisetools-art { width: 48px; }

/* ---- "N More in Category" (native <details>, zero JS - progressive enhancement) ---- */
.cruisetools-fold > summary {
    display: flex; justify-content: space-between; align-items: center; min-height: 46px;
    border-top: 1px solid var(--cruisetools-ct-rule); font-weight: 500; font-size: 14.5px;
    cursor: pointer; list-style: none; color: var(--cruisetools-ct-ink);
}
.cruisetools-fold > summary::-webkit-details-marker { display: none; }
.cruisetools-fold > summary::after { content: "\203A"; color: var(--cruisetools-ct-muted); }
.cruisetools-fold[open] > summary::after { content: "\2039"; }

/* 2.5.0: the line that points to the Port Schedules index */
.cruisetools-port-link { margin: 14px 0; font-size: 14.5px; line-height: 1.4; }
.cruisetools-port-link a { font-weight: 500; text-decoration: underline; }

.cruisetools-all-tools-link {
    display: flex; justify-content: space-between; align-items: center; min-height: 46px;
    border-top: 1px solid var(--cruisetools-ct-rule); font-weight: 500; font-size: 14.5px;
    text-decoration: none; color: var(--cruisetools-ct-ink);
}

/* ---- Desktop: cards + 3-col grid, switching at the content-column breakpoint ---- */
.cruisetools-grid { display: grid; gap: 16px; }
.cruisetools-card {
    display: grid; border: 1px solid var(--cruisetools-ct-rule); border-radius: 10px;
    overflow: hidden; background: #fff; align-content: start;
    text-decoration: none; color: inherit;
}
.cruisetools-card .cruisetools-art { aspect-ratio: 16/10; border-radius: 0; }
.cruisetools-card-body { padding: 10px 12px 13px; display: grid; gap: 3px; }
.cruisetools-card-title { font-weight: 700; font-size: 15px; color: var(--cruisetools-ct-ink); line-height: 1.25; }
.cruisetools-card-tagline { font-size: 13px; color: var(--cruisetools-ct-muted); line-height: 1.35; }

@media (min-width: 560px) {
    .cruisetools-desktop-only-hide { display: none; }
    .cruisetools-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
    .cruisetools-feat { grid-template-columns: 300px 1fr; align-items: center; }
    .cruisetools-feat .cruisetools-art { aspect-ratio: auto; height: 100%; }
    .cruisetools-feat-body { padding: 16px 20px; }
    .cruisetools-feat-btn { justify-self: start; padding: 0 20px; display: inline-flex; }
}
@media (max-width: 559.98px) {
    .cruisetools-desktop-only { display: none; }
    /* Prism's look review (PR #14, SHOULD 7): under 560px the jump row must
       stay a SINGLE line that scrolls sideways (overflow-x: auto, already
       set above) - the base rule's flex-wrap: wrap fought that, letting
       items wrap onto a second line instead of needing to scroll. Desktop
       keeps the base wrap behaviour (plenty of width there). */
    .cruisetools-jump { flex-wrap: nowrap; }
}

/* ---- Tool frame: breadcrumb, trust line, sources, more-tools ---- */
.cruisetools-crumb {
    font-size: 12.5px; color: var(--cruisetools-ct-muted); display: flex; gap: 6px;
    align-items: center; flex-wrap: wrap; margin-bottom: 4px;
}
.cruisetools-crumb a { color: var(--cruisetools-ct-accent); text-decoration: none; }
.cruisetools-sources-list { font-size: 13px; line-height: 1.5; padding-left: 18px; }
.cruisetools-sources-list li { margin-bottom: 4px; }
.cruisetools-sources-list small { color: var(--cruisetools-ct-muted); }
.cruisetools-frame-heading { font-size: 13px; font-weight: 700; color: var(--cruisetools-ct-ink); margin: 20px 0 6px; }

/* 2.5.5: a card or featured tile holding a photo keeps the photo's 1200:630 shape, so the title printed on the tool
   images is never cropped (16:10 cut about 8% off each side; the desktop featured column cut more). */
.cruisetools-card .cruisetools-art.cruisetools-art-photo,
.cruisetools-feat .cruisetools-art.cruisetools-art-photo { aspect-ratio: 40/21; height: auto; }