/**
 * Phoca Article Grid Module — styling.
 *
 * @package     Phoca_Premiere
 * @subpackage  Module/CSS
 * @copyright   Copyright (C) 2026 Dariusz Mysliwiec. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 *
 * BEM convention: .ph-article-grid (Block), .ph-article-tile__* (Element)
 * WCAG 2.1 AA compliant: focus indicators, reduced motion support.
 * Reuses the --ph-book-* design tokens defined in booking-widget.css where
 * available (same surfaces/border/radius/shadow/transition scale) so this
 * component does not look visually foreign next to the rest of the template.
 */

/* ==========================================================================
   1. Grid
   ========================================================================== */

.ph-article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: var(--ph-grid-row-height, 360px);
    gap: var(--ph-grid-gap, 24px);
}

/* Admin-configured column count (1-6, see mod_phoca_articlegrid.xml) is
   delivered as a data-attribute matched by a static rule here, not as a CSS
   custom property in the per-render nonce'd <style> block. This module's
   output can be served from Joomla's module cache, which stores only the
   rendered HTML and replays it verbatim on later page loads without
   re-running this module's PHP — so a nonce baked into that cached HTML is
   from a past request and never matches the fresh nonce the current page's
   CSP header actually carries. The browser then silently drops the whole
   <style> block, discarding the admin's column choice. A plain attribute
   selector has no per-request nonce to go stale, so it survives caching. */
.ph-article-grid[data-columns="1"] { grid-template-columns: repeat(1, 1fr); }
.ph-article-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.ph-article-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.ph-article-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
.ph-article-grid[data-columns="5"] { grid-template-columns: repeat(5, 1fr); }
.ph-article-grid[data-columns="6"] { grid-template-columns: repeat(6, 1fr); }

/* Admin-configured column count is a desktop-only setting; never trust it
   to stay usable on small screens. Breakpoint matches the template's own
   tablet breakpoint (Bootstrap md) rather than an arbitrary wider value, so
   the configured column count is honored on ordinary laptop/desktop widths.
   Matched at the same [data-columns] specificity as the rules above so the
   cascade (these come later in the file) decides the winner, not a
   specificity mismatch. */
@media (max-width: 768px) {
    .ph-article-grid,
    .ph-article-grid[data-columns] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .ph-article-grid,
    .ph-article-grid[data-columns] {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   2. Tile
   ========================================================================== */

.ph-article-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--ph-book-bg, #fff);
    border: 1px solid var(--ph-book-border, #e5e7eb);
    border-radius: var(--ph-book-radius, 20px);
    box-shadow: var(--ph-book-shadow, 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%));
    transition: box-shadow var(--ph-book-transition, 0.2s ease), transform var(--ph-book-transition, 0.2s ease);
}

.ph-article-tile:hover {
    box-shadow: var(--ph-book-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%));
    transform: translateY(-2px);
}

.ph-article-tile__image-link {
    display: block;
    flex-shrink: 0;
    position: relative;
}

.ph-article-tile__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Numbered badge — brand black circle, sits inline with the title (same
   row), echoing the template's own numbered step/feature-card styling. */
.ph-article-tile__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--phoca-primary, #000);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ph-article-tile__title {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 1rem 1rem 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--phoca-primary, #1f2937);
}

.ph-article-tile__title-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ph-article-tile__title a {
    color: inherit;
    text-decoration: none;
}

.ph-article-tile__title a:hover {
    text-decoration: underline;
}

.ph-article-tile__title a:focus-visible {
    outline: 2px solid var(--ph-book-primary, #3b82f6);
    outline-offset: 2px;
}

.ph-article-tile__excerpt {
    flex: 1 1 auto;
    margin: 0 1.25rem 1rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--phoca-red, #6b7280);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

/* Bottom bar: full width, pinned to the bottom of the tile regardless of
   excerpt length via margin-top: auto on this flex-column parent. */
.ph-article-tile__readmore {
    display: block;
    width: 100%;
    margin-top: auto;
    padding: 0.75rem 1rem;
    border: none;
    border-top: 1px solid var(--ph-book-border, #e5e7eb);
    background: var(--ph-book-surface, #f9fafb);
    color: var(--phoca-primary, #000);
    font-weight: 700;
    font-size: 0.9375rem;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    transition: background var(--ph-book-transition, 0.2s ease), color var(--ph-book-transition, 0.2s ease);
}

.ph-article-tile__readmore:hover {
    background: var(--phoca-primary, #000);
    color: #fff;
}

.ph-article-tile__readmore:focus-visible {
    outline: 2px solid var(--phoca-primary, #000);
    outline-offset: -2px;
}

/* ==========================================================================
   3. Empty state
   ========================================================================== */

.ph-article-grid__empty {
    margin: 1rem 0;
    padding: 0.75rem 0;
    color: var(--ph-book-text-muted, #6b7280);
    font-size: 0.9375rem;
    text-align: center;
}

/* ==========================================================================
   4. Reduced motion (accessibility)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .ph-article-tile,
    .ph-article-tile__readmore {
        transition-duration: 0.01ms !important;
    }

    .ph-article-tile:hover {
        transform: none;
    }
}