/* ============================================================
   Page-specific styles for template-mobile.php
   Shared component styles live in sections.css / base.css.
   New classes introduced on this page only:
     .xfr-plan-grid--two   — 2-column centered plan layout
     .xfr-plan__mobile-sub — sub-line under the plan price row
     .xfr-deal-grid        — 4-column deal card grid
     .xfr-deal             — individual deal card
     .xfr-deal__icon       — large icon treatment inside deal card
     .xfr-deal__title      — deal headline
     .xfr-deal__terms      — fine-print terms note inside deal card
   ============================================================ */

/* ---- 2-column plan grid (mobile page) ---- */
.xfr-plan-grid--two {
    grid-template-columns: repeat(2, 1fr);
    max-width: 820px;
    margin-inline: auto;
}

/* Sub-rate line under the plan "from" price */
.xfr-plan__mobile-sub {
    font-size: 13px;
    color: var(--muted-fg);
    margin-top: -6px;
    margin-bottom: 14px;
}

/* ---- Deal card grid ---- */
.xfr-deal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.xfr-deal {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--t), box-shadow var(--t);
}

.xfr-deal:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
}

.xfr-deal__icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--brand) 10%, #fff);
    color: var(--brand);
    margin-bottom: 18px;
    flex-shrink: 0;
}

.xfr-deal__icon svg {
    width: 26px;
    height: 26px;
}

.xfr-deal__title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 12px;
}

.xfr-deal__terms {
    font-size: 13px;
    color: var(--muted-fg);
    line-height: 1.65;
    flex-grow: 1;
    margin-bottom: 22px;
}

/* Responsive breakpoints */
@media (max-width: 1100px) {
    .xfr-deal-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .xfr-plan-grid--two {
        grid-template-columns: 1fr;
        max-width: 460px;
    }
}

@media (max-width: 600px) {
    .xfr-deal-grid {
        grid-template-columns: 1fr;
    }
}