/**
 * components.css - Reusable Surface Primitives
 *
 * After the v0.1.0 refactor, this file holds the shared
 * surface primitives that did not warrant their own module:
 *   - Card primitives (.overview-card, .service-card,
 *     .equipment-card) and their image area.
 *   - Placeholder image blocks.
 *   - Hours table.
 *   - Address block.
 *   - Note callout.
 *   - Star rating icon helper.
 *   - Legacy .brand-logos placeholder (kept for backward
 *     compat; the active brand marquee lives in
 *     brand-marquee.css).
 *
 * What moved out in v0.1.0:
 *   - Hamburger toggle, mobile drawer surface, shared
 *     .nav-list base -> nav-toggle.css
 *   - Button primitives (.btn family) -> buttons.css
 *   - Header layout / sticky / branding -> header-layout.css
 *   - Desktop nav + dropdowns -> header-nav-desktop.css
 *   - Mobile accordion variant -> header-nav-mobile.css
 *
 * @package LibrandiOutdoorPower
 * @since   0.1.0
 */


/* ==========================================================
   Card Primitives (overview, service, equipment)

   Heading inside cards uses --font-heading (Racing Sans One)
   automatically via the base h3 rule; no override needed.
   ========================================================== */
.overview-card,
.service-card,
.equipment-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    transition: box-shadow var(--duration-slow) var(--ease),
                transform  var(--duration-slow) var(--ease);
}
.overview-card:hover,
.service-card:hover,
.equipment-card:hover {
    box-shadow: var(--shadow-card);
    transform: translateY(-3px);
}
.overview-card h3,
.service-card h3,
.equipment-card h3 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-3);
    color: var(--color-primary);
}

/* Equipment card image area */
.equipment-card__image {
    margin-bottom: var(--space-4);
    border-radius: var(--radius-md);
    overflow: hidden;
}


/* ==========================================================
   Placeholder image blocks
   ========================================================== */
.placeholder-img {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-gray-100);
    color: var(--color-gray-400);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-md);
}
.placeholder-img--gallery {
    aspect-ratio: 4 / 3;
}


/* ==========================================================
   Hours Table
   ========================================================== */
.hours-table {
    width: 100%;
    max-width: 320px;
    border-collapse: collapse;
    font-size: var(--text-sm);
    font-family: var(--font-mono);
}
.hours-table td {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-gray-200);
}
.hours-table td:first-child {
    font-weight: 500;
}
.hours-table td:last-child {
    text-align: right;
    color: var(--color-gray-600);
}
.hours-table tr.closed td:last-child {
    color: var(--color-gray-400);
}


/* ==========================================================
   Address Block
   ========================================================== */
.address-block {
    font-size: var(--text-sm);
    line-height: 1.8;
}
.address-block a {
    color: var(--color-primary);
    transition: color var(--duration) var(--ease);
}
.address-block a:hover {
    color: var(--color-primary-dark);
}


/* ==========================================================
   Note Callout
   ========================================================== */
.note {
    padding: var(--space-4) var(--space-6);
    background: var(--color-off-white);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius);
    font-size: var(--text-sm);
}


/* ==========================================================
   Star Rating Icons
   ========================================================== */
.star-icon {
    color: var(--color-accent);
    flex-shrink: 0;
}


/* ==========================================================
   Brand Logos Placeholder (legacy, kept for backward compat)

   The real brand marquee lives in assets/css/brand-marquee.css
   and is registered in inc/brand-marquee.php.
   ========================================================== */
.brand-logos {
    margin-top: var(--space-8);
    padding: var(--space-8);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-200);
}