/* ============================================================
   RENTIT RENTAL POLICIES PAGE
   Layout comes from terms.css (sticky contents + reading column).
   This file adds the policy-specific blocks. All colours come
   from theme.css (--home-*).
   ============================================================ */

/* Key points strip under the intro */
.policy-summary--intro {
    margin-top: 32px;
}

/* Fact sheets inside the reading column */
.terms-body .policy-facts {
    margin: 18px 0;
}

.terms-body .policy-facts dd a {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Cancellation tiers */
.policy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin-top: 16px;
    background: var(--home-line);
    border: 1px solid var(--home-line);
    border-radius: 10px;
    overflow: hidden;
}

.policy-grid div {
    padding: 16px 18px;
    background: var(--bg-card);
    font-size: 15px;
    line-height: 1.55;
    color: var(--home-ink-soft);
}

.policy-grid div:first-child {
    box-shadow: inset 3px 0 0 var(--accent);
}

.policy-grid strong {
    display: block;
    margin-bottom: 4px;
    color: var(--home-ink);
}

/* Damage fee table */
.policy-table {
    margin-top: 16px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--home-line);
    border-radius: 10px;
}

.policy-table .home-table td:first-child {
    white-space: normal;
}

.policy-table .home-table td:last-child,
.policy-table .home-table th:last-child {
    text-align: right;
}

.terms-body .policy-note {
    margin-top: 14px;
    font-size: 14px;
    color: var(--home-ink-faint);
}

.terms-body .policy-note a {
    color: var(--home-ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 3px;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 768px) {
    /* home.css hides the 2nd column of .home-table on phones;
       here that column is the fee, so keep it */
    .policy-table .home-table td:nth-child(2),
    .policy-table .home-table th:nth-child(2) {
        display: table-cell;
    }
}

@media (max-width: 480px) {
    .policy-grid {
        grid-template-columns: 1fr;
    }
}