/* ================================================================
   Parent Child Locations Widget — pcw-style.css
   v1.3.0
   Two selectable layout modes (set via the Layout control / the
   `layout` shortcode attribute). Column count and gap come from the
   --pcw-cols / --pcw-gap variables, which Elementor's responsive
   controls write directly; the .pcw-cols-* helpers below cover the
   shortcode / classic-widget path.

   • Masonry  (.pcw-grid--masonry): groups read LEFT-TO-RIGHT across
     the top row and pack tightly with no vertical gaps. Powered by
     pcw-masonry.js. Before the script runs it degrades gracefully to
     a plain grid (left-to-right, with gaps).

   • Columns  (.pcw-grid--columns): balanced newspaper columns, no
     gaps, but groups read TOP-TO-BOTTOM down each column. No JS.
   ================================================================ */

/* ── Shared variables ─────────────────────────────────────────── */
.pcw-grid {
    --pcw-cols: 2;
    --pcw-gap: 32px;
    width: 100%;
}

/* Column-count helpers (shortcode / classic widget) set the var */
.pcw-cols-1 { --pcw-cols: 1; }
.pcw-cols-2 { --pcw-cols: 2; }
.pcw-cols-3 { --pcw-cols: 3; }
.pcw-cols-4 { --pcw-cols: 4; }
.pcw-cols-5 { --pcw-cols: 5; }
.pcw-cols-6 { --pcw-cols: 6; }

/* ── Mode: Columns (CSS multi-column) ─────────────────────────── */
.pcw-grid--columns {
    display: block;
    column-count: var(--pcw-cols, 2);
    column-gap: var(--pcw-gap, 32px);
}
.pcw-grid--columns .pcw-group {
    /* Keep a county and its locations together in one column */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    display: inline-block;
    width: 100%;
    margin-bottom: var(--pcw-gap, 32px);
}

/* ── Mode: Masonry (CSS grid + pcw-masonry.js) ────────────────── */
.pcw-grid--masonry {
    display: grid;
    grid-template-columns: repeat(var(--pcw-cols, 2), 1fr);
    column-gap: var(--pcw-gap, 32px);
    align-items: start;
}
.pcw-grid--masonry .pcw-group {
    /* Fallback spacing before the masonry script runs */
    margin-bottom: var(--pcw-gap, 32px);
}
/* Once pcw-masonry.js takes over: rows become a fine unit and the
   script bakes the gap into each group's row span. */
.pcw-grid--masonry.pcw-masonry-ready {
    grid-auto-rows: 1px;
    row-gap: 0;
}
.pcw-grid--masonry.pcw-masonry-ready .pcw-group {
    margin-bottom: 0;
}

/* ── Responsive (shortcode / classic widget) ──────────────────── */
@media (max-width: 900px) {
    .pcw-cols-4,
    .pcw-cols-5,
    .pcw-cols-6 { --pcw-cols: 3; }
}
@media (max-width: 768px) {
    .pcw-cols-3,
    .pcw-cols-4,
    .pcw-cols-5,
    .pcw-cols-6 { --pcw-cols: 2; --pcw-gap: 24px; }
}
@media (max-width: 480px) {
    .pcw-grid,
    .pcw-cols-2,
    .pcw-cols-3,
    .pcw-cols-4,
    .pcw-cols-5,
    .pcw-cols-6 { --pcw-cols: 1 !important; --pcw-gap: 16px; }
}

/* ── Group base ───────────────────────────────────────────────── */
.pcw-group {
    min-width: 0; /* prevent overflow */
}

/* ── Parent header ────────────────────────────────────────────── */
.pcw-parent-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    line-height: 1.2;
}

/* ── Icon wrapper ─────────────────────────────────────────────── */
.pcw-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

/* Emoji / text icon */
.pcw-icon--emoji {
    background-color: #1a4a8a;
    border-radius: 50%;
    color: #fff;
    font-size: 0.8rem;
}

/* Image icon */
.pcw-icon--image {
    background: none;
    border-radius: 0;
    width: auto;
    height: auto;
}

.pcw-icon-img {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
    transition: opacity 0.15s ease;
}

/* ── Parent name / link ───────────────────────────────────────── */
.pcw-parent-link,
.pcw-parent-name {
    font-weight: 700;
    font-size: 1rem;
    color: inherit;
    text-decoration: none;
}
.pcw-parent-link:hover {
    text-decoration: underline;
}

.pcw-count {
    font-size: 0.8rem;
    font-weight: 400;
    color: #888;
    margin-left: 2px;
}

/* ── Children list ────────────────────────────────────────────── */
.pcw-children {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pcw-child {
    margin-bottom: 4px;
    line-height: 1.5;
}
.pcw-child a {
    text-decoration: none;
    font-size: 0.95rem;
    color: #1a4a8a;
    transition: color 0.15s ease;
}
.pcw-child a:hover {
    color: #0d2f5e;
    text-decoration: underline;
}

/* ── Empty content — base ─────────────────────────────────────── */
.pcw-no-content {
    cursor: default;
    display: inline;
    transition: none;
}

/* Muted (default) */
.pcw-no-content--muted {
    color: #999;
    opacity: 0.7;
}

/* Normal — plain text colour */
.pcw-no-content--normal {
    color: inherit;
}

/* Italic */
.pcw-no-content--italic {
    font-style: italic;
    color: #888;
}

/* Strikethrough */
.pcw-no-content--strikethrough {
    text-decoration: line-through;
    color: #aaa;
}

/* County (parent) empty items — override independently via Elementor */
.pcw-no-content--parent {
    /* Elementor targets this class separately */
}

/* Suffix label */
.pcw-no-content-label {
    display: inline;
    margin-left: 4px;
    font-size: 0.8em;
}

/* ── Empty state ──────────────────────────────────────────────── */
.pcw-empty {
    color: #888;
    font-style: italic;
}