/* R7 Task 14 — OIE public storefront (prototype-fidelity rebuild, spec §4).
   Shipped in the package's public asset dir beside ops.css; referenced via
   asset('assets/occ-oie/storefront.css'). No imports, no external URLs. */

/* UX-2 Task 1 (R5-19, R3-27): the palette lives in tokens.css (the --oie-* tokens on
   :root, loaded on every page); this file only reads it. Gold TEXT reads
   --oie-gold-text; --oie-gold-strong is for borders and fills.
   UX-2 Task 9 (R5-18, OQ4, PF9): the one design language. The site font in both
   directions (the vendor layout's own --font-family-base / --font-family-rtl,
   design_1/web/layouts/app.blade.php:42: Gilroy and Tajawal, with the rial glyph);
   Task 8's type scale (12/13/14/16/18/22/28px, plus the hero title's one 40px
   display size), spacing scale (0/4/8/12/16/24/32/40/48/64px) and radius scale
   (6/10/16/999px, 50%); the one button (.oie-btn, tokens.css) with .oie-store-btn
   kept only as its alias. Storefront\StorefrontDesignScaleTest pins all of this. */
.oie-store {
    font-family: var(--font-family-base);
    color: var(--oie-ink);
    background: #FFFFFF;
}
.rtl .oie-store { font-family: var(--font-family-rtl); }
.oie-store-shell { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* --- hero --- */
.oie-store-hero { padding: 64px 0 48px; background: var(--oie-gold-tint); border-bottom: 1px solid var(--oie-line); }
.oie-store-hero--compact { padding: 48px 0 32px; }
.oie-store-eyebrow {
    display: inline-block; padding: 8px 12px; border-radius: 999px;
    background: var(--oie-gold-soft); color: var(--oie-gold-text);
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.oie-store-title { margin: 16px 0 8px; font-size: 40px; line-height: 1.15; font-weight: 800; color: var(--oie-ink); }
.oie-store-hero--compact .oie-store-title { font-size: 28px; }
.oie-store-sub { margin: 0 0 24px; max-width: 640px; font-size: 16px; color: var(--oie-charcoal); }
.oie-store-h2 { margin: 0; font-size: 28px; font-weight: 800; color: var(--oie-ink); }

/* --- search --- */
.oie-store-search { display: flex; gap: 8px; max-width: 640px; }
.oie-store-search input {
    flex: 1; padding: 12px 16px; border: 1px solid var(--oie-line);
    border-radius: 10px; font-size: 16px; background: #FFFFFF; color: var(--oie-ink);
}
.oie-store-search input:focus { outline: 2px solid var(--oie-gold); outline-offset: 1px; }

/* --- category chips --- */
.oie-store-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.oie-store-chip {
    padding: 8px 16px; border: 1px solid var(--oie-line); border-radius: 999px;
    background: #FFFFFF; color: var(--oie-charcoal); font-size: 14px; text-decoration: none;
}
.oie-store-chip:hover { border-color: var(--oie-gold); color: var(--oie-gold-text); }
.oie-store-chip.is-active { background: var(--oie-gold); border-color: var(--oie-gold); color: var(--oie-ink); font-weight: 700; }

/* --- sort strip (R19 Task 9: the catalogue's own sort links — the vendor's
   own ?sort= never reached a visitor from an OIE page, which is the defect
   ruling 12 names) --- */
.oie-store-sorts { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.oie-store-sort { color: var(--oie-charcoal); font-size: 14px; text-decoration: none; }
.oie-store-sort:hover { color: var(--oie-gold-text); }
.oie-store-sort.is-active { color: var(--oie-gold-text); font-weight: 700; text-decoration: underline; }

/* --- sections + grid --- */
.oie-store-section { padding: 48px 0; }
.oie-store-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.oie-store-count { color: var(--oie-muted); font-size: 14px; }
.oie-store-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 991px) { .oie-store-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .oie-store-grid { grid-template-columns: 1fr; } }
/* Fallback cell class the grid-wrapper override applies when a caller omits
   $gridCardClassName (verification finding, Task 14): every current vendor
   call site passes an explicit Bootstrap column class, so this rule is a
   safety net against an unstyled card wrapper, not exercised today. Works
   as a plain block in a CSS-grid parent and as a wrapping flex item with a
   sane minimum width if it ever lands inside a Bootstrap .row instead. */
.oie-store-grid-cell { flex: 1 1 280px; min-width: 240px; margin-bottom: 24px; }
.oie-store-empty {
    padding: 32px; border: 1px dashed var(--oie-line); border-radius: 10px;
    color: var(--oie-charcoal); text-align: center; background: var(--oie-gold-tint);
}

/* --- course card --- */
.oie-store-card {
    display: flex; flex-direction: column; border: 1px solid var(--oie-line);
    border-radius: 16px; overflow: hidden; background: #FFFFFF;
    transition: box-shadow .15s ease;
}
.oie-store-card:hover { box-shadow: 0 8px 24px rgba(43, 43, 39, .10); }
.oie-store-card-media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--oie-gold-soft); }
.oie-store-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* UX-1 T16 (R5-11): a course with no image (or a broken one: the <img>'s
   onerror adds .is-fallback) shows a tinted panel with a flame mark and
   its category, never the raw alt text. Eight tones from the OIE palette,
   each >= 4.5:1 against the white text (ink, a deep gold, six muted tints);
   the card picks one by category (Storefront\CourseImageFallback::tone). */
.oie-store-card-media { aspect-ratio: 16 / 9; }
.oie-store-card-media.is-fallback img { display: none; }
.oie-store-card-fallback { display: none; }
.oie-store-card-media.is-fallback .oie-store-card-fallback {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px; padding: 16px;
    color: #FFFFFF; text-align: center;
}
.oie-store-card-fallback svg { display: block; opacity: .9; }
.oie-store-card-fallback-name { font-size: 16px; font-weight: 700; line-height: 1.3; }
/* UX-1 fix wave (T16): the fallback panel already names the category, so the corner chip steps aside. */
.oie-store-card-media.is-fallback .oie-store-card-chip { display: none; }
.oie-store-fallback--1 { background: #2B2B27; }
.oie-store-fallback--2 { background: #8A6100; }
.oie-store-fallback--3 { background: #585852; }
.oie-store-fallback--4 { background: #3E5C6B; }
.oie-store-fallback--5 { background: #4A5A7A; }
.oie-store-fallback--6 { background: #5B6B3A; }
.oie-store-fallback--7 { background: #6B4A63; }
.oie-store-fallback--8 { background: #2F6158; }
.oie-store-card-chip {
    position: absolute; top: 12px; left: 12px; padding: 4px 8px; border-radius: 999px;
    background: rgba(255, 255, 255, .95); color: var(--oie-gold-text);
    font-size: 12px; font-weight: 700;
}
.oie-store-card-body { display: flex; flex-direction: column; gap: 8px; padding: 16px; flex: 1; }
.oie-store-card-title { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 700; }
.oie-store-card-title a { color: var(--oie-ink); text-decoration: none; }
.oie-store-card-title a:hover { color: var(--oie-gold-text); }
.oie-store-card-meta { margin: 0; color: var(--oie-muted); font-size: 13px; }
/* R19 Task 9 (ruling 12): the delivery-mode chip — the vendor `webinars.type`
   column, and only where that column says something this package recognises. */
.oie-store-card-mode {
    margin: 0; align-self: flex-start; padding: 4px 8px; border-radius: 999px;
    background: var(--oie-gold-tint); border: 1px solid var(--oie-line); color: var(--oie-charcoal);
    font-size: 12px; font-weight: 700; letter-spacing: .01em;
}
.oie-store-card-teacher { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--oie-charcoal); }
.oie-store-card-teacher img { border-radius: 50%; }
.oie-store-card-foot { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.oie-store-card-rate { color: var(--oie-gold-text); font-weight: 700; font-size: 14px; }
.oie-store-card-price { font-weight: 800; font-size: 16px; color: var(--oie-ink); }
.oie-store-card-actions { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; }

/* --- buttons + links ---
   UX-2 Task 9 (PF9, Ruling 12): the storefront's buttons are the one filled button,
   .oie-btn (tokens.css). .oie-store-btn stays only as an alias declaring exactly
   what .oie-btn declares, from the same custom properties; its hover keeps the ink
   text (it turned white on --oie-gold-strong, 2.95:1, Task 1's deferred finding).
   .oie-store-link is ink with a gold underline (it sits on the storefront's own light
   surfaces, so it keeps ink where tokens.css .oie-link inherits). app.min.css:27643
   `a:hover, a:focus { text-decoration: none }` (0,1,1) beats .oie-store-link (0,1,0),
   so :hover and :focus re-declare the underline at 0,2,0 (UX-2 fix wave, T9-M1). */
.oie-store-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: clamp(var(--oie-btn-min-height), calc(44px + (1279px - 100vw) * 100), 44px);
    padding: var(--oie-btn-padding);
    background: var(--oie-btn-bg);
    color: var(--oie-btn-fg);
    border: 1px solid transparent;
    border-radius: var(--oie-btn-radius);
    font-family: inherit;
    font-size: var(--oie-text-14);
    font-weight: var(--oie-btn-weight);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}
.oie-store-btn:hover {
    color: var(--oie-btn-fg);
    filter: brightness(.97);
}
.oie-store-link {
    color: var(--oie-ink); font-size: 14px;
    text-decoration: underline; text-decoration-color: var(--oie-gold); text-underline-offset: 3px;
}
.oie-store-link:focus {
    color: var(--oie-ink);
    text-decoration: underline; text-decoration-color: var(--oie-gold); text-underline-offset: 3px;
}
.oie-store-link:hover {
    color: var(--oie-ink);
    text-decoration: underline; text-decoration-color: var(--oie-gold); text-underline-offset: 3px; text-decoration-thickness: 2px;
}

/* --- pagination (wraps the vendor's pre-rendered pagination HTML) --- */
.oie-store-pagination { display: flex; justify-content: center; margin-top: 32px; }
/* UX-1 T16 (R5-10): the paginator's ul.pagination was an unstyled vertical
   list on OIE pages (no Bootstrap pagination rules load there). A wrapping
   row of 40px boxes; the current page in the storefront ink. */
.oie-store-pagination .pagination { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.oie-store-pagination .page-link,
.oie-store-pagination .page-item > span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; border: 1px solid var(--oie-line, #EAE8E3);
    border-radius: 10px; color: inherit; text-decoration: none;
}
.oie-store-pagination .active > * { background: var(--oie-ink, #2B2B27); border-color: var(--oie-ink, #2B2B27); color: #fff; }
.oie-store-pagination .disabled > * { opacity: .5; }
/* UX-1 fix wave (T16): charcoal, 7.16:1 on white (the muted tone was 3.43:1). */
.oie-store-page-of { margin: 12px 0 0; text-align: center; color: var(--oie-charcoal, #585852); font-size: 14px; }

/* --- programmes band (home, Task 15) --- */
.oie-store-programmes { padding: 24px 0 48px; }
.oie-store-programmes-card {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 32px; border-radius: 16px; background: var(--oie-gold-tint);
    border: 1px solid var(--oie-gold-soft); flex-wrap: wrap;
}

/* --- corporate enquiry --- */
.oie-store-enquiry { padding: 48px 0 64px; background: var(--oie-gold-tint); border-top: 1px solid var(--oie-line); }
.oie-store-enquiry-form { position: relative; display: flex; flex-direction: column; gap: 16px; max-width: 720px; margin-top: 24px; }
.oie-store-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .oie-store-field-row { grid-template-columns: 1fr; } }
.oie-store-field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; color: var(--oie-charcoal); }
.oie-store-field input, .oie-store-field textarea {
    padding: 12px; border: 1px solid var(--oie-line); border-radius: 10px;
    font-size: 16px; font-weight: 400; background: #FFFFFF; color: var(--oie-ink);
}
.oie-store-field input:focus, .oie-store-field textarea:focus { outline: 2px solid var(--oie-gold); outline-offset: 1px; }
.oie-store-flash { margin: 16px 0 0; padding: 12px 16px; border-radius: 10px; font-size: 16px; }
.oie-store-flash--ok { background: #E8F5E9; color: #1B5E20; border: 1px solid #C8E6C9; }
.oie-store-flash--err { background: #FDECEA; color: #B71C1C; border: 1px solid #F5C6CB; }
.oie-store-errors { margin: 16px 0 0; padding: 12px 16px 12px 32px; border-radius: 10px; background: #FDECEA; color: #B71C1C; border: 1px solid #F5C6CB; font-size: 14px; }