/* ================================================================
   HOME.CSS - Landing Page Grid Layout and Filtering

   Styles for the homepage grid layout (Isotope), filtering buttons,
   and CELEX input validation.

   Note: base.css and homepage-coral.css are loaded separately in the template.
   ================================================================ */

/* Landing page specific styles */
.grid {
    max-width: 1200px;
    background: transparent;
    padding: 0;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}

/* Grid items - Isotope layout layer (NO transitions on positioning/transform)
   Isotope manages all .grid-item positioning and transforms internally */
.grid-item {
    float: none;
    padding: 5px;
    height: var(--grid-item-height);
    cursor: pointer;
    /* NO transitions here - this is Isotope's territory */
}

/* Grid item content - Visual layer (safe for transitions and hover effects)
   Apply hover effects to the content wrapper, not the grid item itself
   This prevents interference with Isotope's positioning animations */
.grid-item-content {
    /* Safe to transition visual properties and transform on content wrapper
       Isotope doesn't touch this element, only the parent .grid-item */
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.grid-item:hover .grid-item-content {
    /* Lift the content on hover - works on all pages without interfering with Isotope */
    transform: translateY(-2px);
}

/* ... other landing page specific styles ... */

/* .filter-section / .button-group / .button now live in components.css */

* {
    box-sizing: border-box;
}

body {
    /* Font family inherited from branding.css */
    background-color: #ffffff;
    /* Color and smoothing inherited from branding.css */
}

:root {
    --gutter-size: 5px;
    --column-count: 2;
    --expanded-columns: 2;
    --grid-item-height: 140px;
    --grid-item-expanded-rows: 3;
    --grid-item-expanded-height: calc(var(--grid-item-height) * var(--grid-item-expanded-rows));
    --transition-speed: 0.4s;
    --hover-transform: translateY(-1px);

    /* S&S design system colors - white, light coral, grey */
    --card-color-white: var(--color-neutral-white);    /* White: #fff */
    --card-color-light-coral: var(--color-coral-100);  /* Light coral: #fed2d4 */
    --card-color-grey: var(--color-neutral-200);       /* Grey: #d9d9d9 */

    /* Primary colors for expanded/hover states */
    --color-primary: var(--color-coral-100);           /* Light coral */
    --color-hover: var(--color-coral-200);             /* Slightly darker for hover */
    --color-expanded: var(--color-coral-100);          /* Light coral when expanded */

    /* Region colors */
    --color-eu: var(--color-neutral-white);            /* White */
    --color-uk: var(--color-coral-100);                /* Light coral */
    --color-de: var(--color-neutral-200);              /* Grey */

    /* Sector colors */
    --color-tmt: var(--color-neutral-white);           /* White */
    --color-fi: var(--color-coral-100);                /* Light coral */
    --color-amif: var(--color-neutral-200);            /* Grey */
    --color-hls: var(--color-coral-100);               /* Light coral */

    /* Font sizes */
    --font-size-small: 12px;
    --font-size-normal: 14px;
    --font-size-large: 18px;
    --font-size-xlarge: 24px;
    --font-size-xxlarge: 42px;

    /* Legacy aliases - 3 color pattern */
    --color-red: var(--card-color-white);
    --color-amber: var(--card-color-light-coral);
    --color-green: var(--card-color-grey);
}

/* Heading styles moved to base.css for DRY - now uses .heading-content .heading-title */

#filters {
    position: relative;
    z-index: 1;
}

/* SM breakpoint (≥576px) */
@media (min-width: 576px) {
    :root {
        --column-count: 2;
    }
}

/* MD breakpoint (≥768px) */
@media (min-width: 768px) {
    :root {
        --column-count: 3;
    }
}

/* LG breakpoint (≥992px) */
@media (min-width: 992px) {
    :root {
        --column-count: 4;
    }
}

/* XL breakpoint (≥1200px) */
@media (min-width: 1200px) {
    :root {
        --column-count: 4;
    }
}

/* item is invisible, but used for layout */
.grid-item,
.grid-sizer {
    width: calc((100% / var(--column-count)) - (var(--gutter-size) * (var(--column-count) - 1) / var(--column-count)));
}

/* item-content is visible, and transitions size */
.grid-item-content {
    position: relative;
    width: 100%;
    height: 100%;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 1rem;
    transition: background-color 0.2s ease;
    text-decoration: none;
    display: block;
    color: inherit;
}

.grid-item-content h3.name {
    position: relative;
    /* left: 10px; */
    top: 50px;
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
}

.grid-item-content .symbol {
    position: absolute;
    left: 10px;
    top: 5px;
    /* Serif acronym is a deliberate look, not inheritance leakage — pin it to the
       brand serif so a future body-font change can't silently flip it (#1235). */
    font-family: var(--ss-font-serif);
    font-size: var(--font-size-xxlarge);
    font-weight: bold;
    color: white;
    margin: 0;
}

.grid-item-content .sector {
    position: absolute;
    left: 10px;
    bottom: 8px;
    font-size: var(--font-size-normal);
    margin: 0;
}

.grid-item:hover .grid-item-content {
    text-decoration: none;
}

/* both item and item content change size */
.grid-item.is-expanded {
    width: calc((100% / var(--column-count) * var(--expanded-columns)) - (var(--gutter-size) * (var(--column-count) - 1) / var(--column-count)));
    height: var(--grid-item-expanded-height);
    z-index: 2;
}

.grid-item.is-expanded .grid-item-content {
    background-color: var(--color-primary);  /* Muted coral when expanded */
    color: white;
}

/* Filter buttons (.button / .button-group) now live in components.css */

/* Section spacing only — typography comes from the canonical scale */
h2 {
    margin: 10px 0 5px;
}

#filters {
    margin-bottom: 15px;
}

/* Region-based colors */
.grid-item-content.eu,
.grid-item.eu .grid-item-content {
    background: var(--color-eu);
}

.grid-item-content.uk,
.grid-item.uk .grid-item-content {
    background: var(--color-uk);
}

.grid-item-content.de,
.grid-item.de .grid-item-content {
    background: var(--color-de);
}

.grid-item .detail-content {
    position: relative;
    top: 50px;
    /* left: 7px; */
    /* right: 0; */
    /* padding: 15px; */
    /* background: inherit; */
    /* opacity: 0; */
    transition: opacity var(--transition-speed) ease;
}

.grid-item.is-expanded .detail-content {
    opacity: 1;
}

/* Style the detail content */
.detail-content p {
    margin: 0.5rem 0;
}

.detail-content strong {
    opacity: 0.8;
}

.detail-content a {
    color: inherit;
    text-decoration: underline;
}

/* Optional: make headings in detail content larger */
.detail-content h3,
.detail-content h4 {
    font-size: var(--font-size-large);
    margin: 12px 0 8px;
    color: white;
}

/* Regular grid item territory (region) */
.grid-item-content .region {
    position: absolute;
    right: 8px;
    top: 5px;
    margin: 0;
    color: white;
    font-size: var(--font-size-normal);
}

/* Larger territory text when expanded */
.grid-item.is-expanded .grid-item-content .region {
    font-size: var(--font-size-xxlarge);  /* Much larger when expanded */
    font-weight: bold;
}

/* Hide sectors in grid item when expanded */
.grid-item.is-expanded .grid-item-content .sector {
    display: none;  /* Hide original sector text when expanded */
}

/* Larger name when expanded */
.grid-item.is-expanded .grid-item-content h3.name {
    font-size: var(--font-size-xlarge);  /* Much larger, increased from 18px */
    font-weight: bold;
    line-height: 1.3;
}

/* S&S three-color pattern: white, light coral, grey */
.grid-item:nth-child(3n+1) .grid-item-content {
    background-color: var(--card-color-white) !important;  /* White (#fff) */
    color: var(--color-neutral-600) !important;  /* Dark text on white */
}

.grid-item:nth-child(3n+2) .grid-item-content {
    background-color: var(--card-color-light-coral) !important;  /* Light coral (#fed2d4) */
    color: var(--color-neutral-600) !important;  /* Dark text on light background */
}

.grid-item:nth-child(3n+3) .grid-item-content {
    background-color: var(--card-color-grey) !important;  /* Grey (#d9d9d9) */
    color: var(--color-neutral-600) !important;  /* Dark text on light background */
}

/* Dark text on all light backgrounds (white, light coral, grey) */
.grid-item:nth-child(3n+1) .grid-item-content .symbol,
.grid-item:nth-child(3n+1) .grid-item-content .region,
.grid-item:nth-child(3n+2) .grid-item-content .symbol,
.grid-item:nth-child(3n+2) .grid-item-content .region,
.grid-item:nth-child(3n+3) .grid-item-content .symbol,
.grid-item:nth-child(3n+3) .grid-item-content .region {
    color: var(--color-neutral-600) !important;
}

/* Remove or comment out the RAG-based colors */
/* 
.grid-item[data-rag="red"] .grid-item-content,
.grid-item.is-expanded[data-rag="red"] .grid-item-content {
    background-color: var(--color-red);
    color: white;
}
// ... other RAG color rules ...
*/

/* CELEX Input styles moved to legislation_search.css (shared component,
   loaded globally from layouts/base.html). */