/*
 * UR Invited — UI polish layer (Sprint 19)
 *
 * Mobile-first visual improvements. Loaded after page-specific stylesheets
 * so its rules win without `!important` in most cases.
 *
 * Scope:
 *  - Catalog cards (smaller hero, tighter density)
 *  - Dashboard event list (richer cards, visible status, dates)
 *  - Event detail page (tab bar overflow, single-CTA watermark card)
 *  - Admin metric tiles (icons + color accents)
 *  - Buttons, inputs, chips, focus rings
 *  - Trust-strip on home and FAQ readability
 */

/* =========================================================================
   1) CATALOG — denser, more browsable on mobile
   ========================================================================= */
@media (max-width: 719px) {
  .cat-grid { gap: 16px; }

  /* Tighter card container */
  .cat-card {
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(20,30,60,0.04), 0 10px 24px -16px rgba(20,30,60,0.18);
  }

  /* Was 9/16 — too tall. 4/5 gives a clean portrait-ish hero. */
  .cat-card__stage { aspect-ratio: 4 / 5; }

  /* The 4-frame scene strip was eating ~80px. 3 frames at smaller height. */
  .cat-card__strip {
    padding: 6px 10px 0;
    gap: 4px;
  }
  .cat-card__strip-frame { aspect-ratio: 4 / 5; border-radius: 6px; }
  /* Hide 4th frame on phone to keep card short */
  .cat-card__strip-frame:nth-child(n+4) { display: none; }

  .cat-card__body {
    padding: 14px 14px 16px;
    gap: 8px;
  }
  .cat-card__name { font-size: 1.15rem; }
  .cat-card__tagline { font-size: 0.85rem; line-height: 1.4; }
  .cat-card__badges { gap: 6px; }
  .cat-badge {
    font-size: 0.66rem;
    padding: 3px 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .cat-card__price { padding-top: 10px; margin-top: 4px; }
  .cat-card__price-amount { font-size: 1.2rem; }
  .cat-card__price-note { font-size: 0.7rem; }
  .cat-card__actions { padding-top: 8px; gap: 8px; }
  .cat-card__actions .btn { padding: 10px 12px; font-size: 0.92rem; }
}

/* =========================================================================
   2) HOMEPAGE — trust strip as visual chips, lighter eyebrow rule
   ========================================================================= */
@media (max-width: 719px) {
  /* The "Cinematic invitations · Made in Los Angeles" eyebrow had a long
     horizontal rule that looked like a broken border. Tighten the rule. */
  .hero-eyebrow,
  [data-eyebrow="hero"] {
    --rule-width: 22px;
  }

  /* Trust strip: subtle refinement only. Original markup uses inline styles
     with checkmark SVGs that already look good — don't redesign, just tighten
     line-height and ensure each line wraps cleanly. */
  .hero__trust {
    line-height: 1.9;
  }
}

/* =========================================================================
   3) DASHBOARD — richer event list cards
   ========================================================================= */
.event-card,
.dash-event-card,
.uv-event-card,
.dash-card[data-event],
li.dash-event,
a.dash-event-link {
  /* Don't fight existing layout — just refine. */
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
@media (hover: hover) {
  .event-card:hover,
  .dash-event-card:hover,
  .uv-event-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -8px rgba(20,30,60,0.18);
    border-color: rgba(20,30,60,0.14);
  }
}

/* The status pill (Draft / Live) — give them visible color identity. */
.chip[data-status="live"],
.chip:has(> :only-child):where([data-status="live"]) {
  background: #e8f4ec;
  color: #1c6b3c;
}
.chip[data-status="draft"] {
  background: #fdf3e3;
  color: #8a5b14;
}

/* The dashboard sign-in / events container could be narrower on phone */
@media (max-width: 719px) {
  .dash-shell, .dash-container { padding-inline: 16px; }
  .dash-event-list { gap: 10px; }
}

/* =========================================================================
   4) EVENT DETAIL PAGE — tab bar overflow + single-CTA watermark card
   ========================================================================= */
/* Horizontal scrolling tab bar so all 4 tabs fit on one line on mobile */
@media (max-width: 719px) {
  .dash-tabs,
  .dash-pane-tabs,
  [role="tablist"].dash-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 4px;
    margin-bottom: 16px;
  }
  .dash-tabs::-webkit-scrollbar,
  .dash-pane-tabs::-webkit-scrollbar { display: none; }
  .dash-tabs > button,
  .dash-tabs > a,
  .dash-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* Watermark-draft callout: tighter padding, smaller secondary heading,
   no double CTA. */
.dash-callout--draft .btn,
.uv-watermark-callout .btn {
  /* JS may still inject a button; CSS guarantees only ONE is visible. */
}
.dash-eventhead + .dash-callout--draft .btn--primary:not(:first-of-type),
.uv-watermark-callout .btn--primary:not(:first-of-type) {
  display: none;
}

@media (max-width: 719px) {
  .dash-callout,
  .dash-callout--draft,
  .uv-watermark-callout {
    padding: 16px;
    border-radius: 14px;
  }
  .dash-callout h2,
  .dash-callout h3,
  .dash-callout strong:first-child {
    font-size: 16px;
    line-height: 1.3;
  }
  .dash-callout p { font-size: 14px; line-height: 1.45; }
}

/* Stats grid: tighten and add a subtle accent line on top */
@media (max-width: 719px) {
  .dash-statgrid {
    gap: 10px;
  }
  .dash-stat {
    position: relative;
    padding: 14px 14px 16px;
    border-radius: 14px;
  }
  .dash-stat__label {
    font-size: 11px;
    letter-spacing: 0.08em;
    color: #6c7691;
  }
  .dash-stat__num {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  .dash-stat__unit {
    font-size: 13px;
    color: #6c7691;
    margin-left: 4px;
  }
  .dash-stat__delta {
    font-size: 12px;
    margin-top: 4px;
    display: block;
  }
}

/* =========================================================================
   5) ADMIN — colored, iconic metric tiles
   ========================================================================= */
@media (max-width: 719px) {
  .dash-statgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* Add subtle left accent strip to each admin metric tile */
.dash-pane[data-pane="overview"] .dash-stat,
.admin-main .dash-stat {
  position: relative;
  overflow: hidden;
}
.dash-pane[data-pane="overview"] .dash-stat::before,
.admin-main .dash-stat::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent, #1e3a8a);
  opacity: 0.7;
}
.admin-main .dash-stat:nth-of-type(1) { --accent: #1e3a8a; }
.admin-main .dash-stat:nth-of-type(2) { --accent: #16a34a; }
.admin-main .dash-stat:nth-of-type(3) { --accent: #c2410c; }
.admin-main .dash-stat:nth-of-type(4) { --accent: #9333ea; }

/* The "Create order" + "Showing the last X orders" pair feels cramped */
@media (max-width: 719px) {
  #btn-new-order-shortcut,
  .admin-main .btn:has(> :only-child:where([data-action="new-order"])) {
    width: 100%;
    margin-top: 8px;
  }
}

/* =========================================================================
   6) BUTTONS — softer shadows, comfortable mobile padding
   ========================================================================= */
@media (max-width: 719px) {
  .btn,
  .btn--primary,
  .btn--secondary,
  .btn--ghost,
  .btn-primary,
  .btn-secondary,
  .dash-btn {
    min-height: 44px;
    padding: 11px 18px;
    font-size: 0.95rem;
    border-radius: 12px;
  }
  .btn--primary,
  .btn-primary {
    box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset,
                0 6px 14px -8px rgba(30, 58, 138, 0.55);
  }
  .btn-sm,
  .btn--sm {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 0.85rem;
    border-radius: 10px;
  }
}

/* Touch-friendly focus ring */
:where(.btn, button, a, input, select, textarea):focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 8px;
}

/* =========================================================================
   7) INPUTS — better default look on mobile
   ========================================================================= */
@media (max-width: 719px) {
  input[type="email"],
  input[type="text"],
  input[type="search"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  textarea,
  select {
    font-size: 16px; /* avoid iOS zoom-on-focus */
    border-radius: 12px;
  }
  /* Generic inputs get our standard padding. */
  input[type="email"],
  input[type="text"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  textarea,
  select {
    padding: 12px 14px;
  }
  /* Search input keeps room for the magnifier icon */
  input[type="search"] { padding: 12px 14px 12px 44px; font-size: 16px; }
  /* .cat-search overrides specifically (icon at 0.95rem from left) */
  .cat-search input[type="search"],
  .cat-search input { padding: 12px 14px 12px 44px; font-size: 16px; }
  /* Password input keeps room for the Show/Hide toggle on the right */
  .dash-pw-wrap input[type="password"],
  .dash-pw-wrap input[type="text"] {
    padding: 12px 56px 12px 14px;
    font-size: 16px;
  }
}

/* =========================================================================
   8) PRICING CHIP — small refinement
   ========================================================================= */
.cat-card__price-amount { font-variant-numeric: tabular-nums; }

/* =========================================================================
   9) CATALOG TABS — pill row that feels intentional
   ========================================================================= */
@media (max-width: 719px) {
  .cat-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding-block: 4px;
    margin-bottom: 16px;
  }
  .cat-tabs::-webkit-scrollbar { display: none; }
  .cat-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    border-radius: 999px;
    padding: 8px 14px;
    min-height: 36px;
  }
  /* Inconsistent SOON pill — match other counters */
  .cat-tab__soon,
  .cat-tab__count {
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 0.65rem;
    border-radius: 999px;
    background: rgba(20,30,60,0.08);
    color: inherit;
    line-height: 1.4;
    font-weight: 600;
  }
}

/* =========================================================================
   10) FOOTER — slightly tighter on mobile, but still 44px tap targets
   ========================================================================= */
@media (max-width: 719px) {
  .footer { padding-block: 28px 36px; font-size: 13px; }
  .footer__links { gap: 4px 18px; row-gap: 0; }
}

/* =========================================================================
   11) MISC — tweaks that don't fit a single section
   ========================================================================= */

/* Sample-row warning chip in event detail RSVPs — softer */
.dash-table__sample-tag {
  background: #fff5d1 !important;
  color: #8a5b14 !important;
  border: 1px solid #f1d480;
}

/* Make the "← All invitations" back link look like a real link on mobile */
@media (max-width: 719px) {
  .dash-back,
  a:has(> :only-child:where(:text("All invitations"))) {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
    color: #1e3a8a;
    font-weight: 500;
    text-decoration: none;
  }
}

/* Slightly nicer empty-state hint for RSVP table */
.dash-sub[hidden] { display: none; }

/* The "+ Create order" button on admin should be full-width on phone */
@media (max-width: 719px) {
  #btn-new-order-shortcut { width: 100%; }
}

/* =========================================================================
   13) DASHBOARD .dash-order CARDS — the actual event-list class
   ========================================================================= */
.dash-order {
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: rgba(20,30,60,0.10);
}
@media (hover: hover) {
  .dash-order:hover {
    box-shadow: 0 6px 16px -10px rgba(20,30,60,0.20);
    transform: translateY(-1px);
  }
}
/* Status-aware left accent: green for live, amber for draft */
.dash-order:has(.chip--live)  { border-left-color: #2f9159; }
.dash-order:has(.chip--draft) { border-left-color: #d6a64a; }

/* Tighter title on mobile + better truncation */
@media (max-width: 719px) {
  .dash-order {
    padding: 14px 16px;
    gap: 12px;
    border-radius: 14px;
  }
  .dash-order__title {
    font-size: 17px !important;
    line-height: 1.25;
    margin-bottom: 6px !important;
    /* Clamp to 2 lines on tiny screens */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .dash-order__meta {
    font-size: 12.5px;
    gap: 6px 10px;
    color: #5b6478;
  }
  .dash-order__meta > span {
    display: inline-flex;
    align-items: center;
  }
  /* Separator dots between meta spans */
  .dash-order__meta > span + span::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(20,30,60,0.25);
    margin-right: 10px;
  }
  /* Status chip aligned right, pinned to top for tall cards */
  .dash-order > .chip {
    align-self: flex-start;
    margin-top: 2px;
    flex-shrink: 0;
  }
}

/* Chip color refinement (matches the .dash-order accent strip) */
.chip.chip--live {
  background: #e6f3ec;
  color: #1f6b3f;
  border: 1px solid rgba(31,107,63,0.18);
}
.chip.chip--draft {
  background: #fbf2db;
  color: #7a5615;
  border: 1px solid rgba(122,86,21,0.18);
}

/* =========================================================================
   14) HOME — eyebrow tweak (the wide "line" before eyebrow text often
       looks like a layout glitch on mobile). Shrink + tone it down.
   ========================================================================= */
@media (max-width: 719px) {
  .eyebrow,
  .hero__eyebrow,
  .section__eyebrow {
    letter-spacing: 0.12em;
    font-size: 11px;
  }
  .eyebrow::before,
  .hero__eyebrow::before {
    width: 18px !important;
    opacity: 0.5;
  }
}

/* =========================================================================
   15) FOOTER LEGAL PAGES — add an obvious link back to the catalog
       (already shipped "← Back to site" — boost target size on mobile)
   ========================================================================= */
@media (max-width: 719px) {
  .legal-back,
  .terms-back,
  .privacy-back,
  a[href="/"]:where(.legal-shell *) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 0;
    font-weight: 500;
    color: #1e3a8a;
  }
}

/* =========================================================================
   16) SCROLLBAR HIDING for horizontal-scroll regions on iOS Safari
   ========================================================================= */
.dash-tabs,
.cat-tabs,
.dash-pane-tabs {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dash-tabs::-webkit-scrollbar,
.cat-tabs::-webkit-scrollbar,
.dash-pane-tabs::-webkit-scrollbar { display: none; height: 0; }