/* ================================================================
   components/table-mobile-case-study-cards.css

   Mobile-card primitives for the Case-studies table (Table 2).
   Used by:
     • /case-studies page
     • /company-detail "Case studies" tab

   Loads on top of components/table-mobile-trade-flows-cards.css
   when both are linked. This file scopes its rules to
   body.page-case-studies / body.page-company-detail so the
   case-studies pages use the phone-only (≤ 767 px) swap while the
   trade-flows pages keep their ≤ 1000 px swap.
   ================================================================ */


/* ================================================================
   1. HOST WRAPPER (desktop ⇄ mobile swap, ≤ 767 px on cs surfaces)
   At ≤ 1000 px the trade-flows file flips the global wrapper to
   mobile. The two scoped rules below restore the desktop variant
   on the case-studies pages from 768–1000 px so the intermediate
   reflow (Phase 2 column-hide) stays visible.
   ================================================================ */
body.page-case-studies .cc-mcard-host__desktop,
body.page-company-detail .cc-mcard-host__desktop { display: block; }
body.page-case-studies .cc-mcard-host__mobile,
body.page-company-detail .cc-mcard-host__mobile  { display: none; }


/* ================================================================
   2. GROUP HEADER (above each cluster of case-study cards)
   Sits inline inside the same outer frame as the cards; tinted bg
   + bottom hairline acts as the section divider.
   ================================================================ */
.cc-mcard-group-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 10px var(--space-md);
    background: color-mix(in srgb, var(--card-bg) 50%, var(--white));
    border-bottom: 1px solid var(--color-input-border);
    color: var(--ae-black);
}
.cc-mcard-group-header__mark {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.cc-mcard-group-header__mark img {
    width: 100%; height: 100%;
    display: block;
}
.cc-mcard-group-header__mark--country {
    width: 32px; height: 24px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.cc-mcard-group-header__mark--country img { object-fit: cover; }
.cc-mcard-group-header__mark--commodity {
    width: 28px; height: 28px;
}
.cc-mcard-group-header__mark--commodity img { object-fit: contain; }
.cc-mcard-group-header__name {
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cc-mcard-group-header__count {
    margin-left: auto;
    color: var(--color-muted);
    font-size: var(--fs-sm);
}

.cc-mcard-host__mobile[data-group="none"]      .cc-mcard-group-header { display: none; }
.cc-mcard-host__mobile[data-group="commodity"] .cc-mcard-group-header[data-group-kind="country"]   { display: none; }
.cc-mcard-host__mobile[data-group="country"]   .cc-mcard-group-header[data-group-kind="commodity"] { display: none; }


/* ================================================================
   3. CARD LIST WRAPPER + CARD CHROME (list-style: one outer frame,
   hairlines between rows).
   ================================================================ */
.cc-mcard-list[data-mobile-card-list] {
    gap: 0;
    background: var(--white);
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.cc-mcard--case {
    background: var(--white);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 2px solid var(--color-input-border);
    overflow: visible;
    padding: 0;
}
.cc-mcard--case:last-child { border-bottom: 0; }

.cc-mcard__head--case {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-md);
    background: var(--white);
    cursor: pointer;
    list-style: none;
    min-height: 44px;
}
.cc-mcard__head--case::-webkit-details-marker { display: none; }
.cc-mcard__head--case::marker                 { content: ""; }
.cc-mcard__head--case:focus-visible {
    outline: 2px solid var(--ae-darkblue);
    outline-offset: -2px;
}

.cc-mcard__case-ident {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.cc-mcard__case-ident .cs-property-name {
    font-weight: 600;
    color: var(--ae-black);
    font-size: var(--fs-md);
    line-height: 1.25;
}
.cc-mcard__case-ident .cs-property-location {
    color: var(--color-muted);
    font-size: var(--fs-sm);
    line-height: 1.3;
}

.cc-mcard__case-commodity {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    color: var(--color-muted);
    font-size: var(--fs-sm);
}
.cc-mcard__case-commodity .cs-commodity-dot {
    width: 14px;
    height: 14px;
}

.cc-mcard__case-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.cc-mcard--case .cc-mcard__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ae-darkblue);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.cc-mcard--case .cc-mcard__toggle-label::before {
    content: "View more";
}
.cc-mcard--case[open] > .cc-mcard__head--case .cc-mcard__toggle-label::before {
    content: "View less";
}
.cc-mcard--case .cc-mcard__chev {
    width: 14px; height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ae-darkblue);
    transition: transform var(--transition-base);
}
.cc-mcard--case .cc-mcard__chev::before {
    content: "";
    width: 7px; height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -2px;
}
.cc-mcard--case[open] > .cc-mcard__head--case .cc-mcard__chev {
    transform: rotate(180deg);
}


/* ================================================================
   4. CASE-STUDY CARD BODY
   ================================================================ */
.cc-mcard__body--case {
    display: flex;
    flex-direction: column;
    padding: var(--space-md);
    border-top: 1px solid var(--color-input-border);
    background: var(--white);
}

.cc-mcard__case-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.cc-mcard__fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.cc-mcard__fact--full {
    grid-column: 1 / -1;
}
.cc-mcard__fact-label {
    font-size: var(--fs-xs);
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.cc-mcard__fact-value {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--ae-black);
}
.cc-mcard__fact-value .cs-area-value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.cc-mcard__fact-value .cs-area-unit {
    margin-left: 4px;
    color: var(--color-muted);
    font-size: var(--fs-xs);
}
.cc-mcard__fact .cs-company-list {
    margin-top: 4px;
}


/* ================================================================
   5. DOWNLOAD PDF BUTTON
   ================================================================ */
.cs-pdf-icon--button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: flex-end;
    min-height: 40px;
    margin-top: var(--space-md);
    padding: 8px 16px;
    width: auto;
    height: auto;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--ae-darkblue);
    background: var(--white);
    color: var(--ae-darkblue);
    font-family: var(--font-heading);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
    transition: background var(--transition-base), color var(--transition-base);
}
.cs-pdf-icon--button:hover,
.cs-pdf-icon--button:focus-visible {
    background: var(--ae-darkblue);
    color: var(--white);
    border-color: var(--ae-darkblue);
}
.cs-pdf-icon--button i {
    font-size: var(--fs-md);
}


/* ================================================================
   RESPONSIVE
   ================================================================ */

/* === ≤ 767px (phones — host swap on cs surfaces) =============== */
@media (max-width: 767px) {
    body.page-case-studies .cc-mcard-host__desktop,
    body.page-company-detail .cc-mcard-host__desktop { display: none; }
    body.page-case-studies .cc-mcard-host__mobile,
    body.page-company-detail .cc-mcard-host__mobile  { display: block; }
}