/* Shared layout, cards, buttons, utilities, and reusable component styles. */

/* Shared component tokens */
:root {
    --decor-line-width: 28px;
    --surface-bg: linear-gradient(180deg, #ffffff 0%, #faf8f4 100%);
    --border: #d9dee7;
    --border-soft: #e8edf4;
    --shadow-soft: 0 12px 32px rgba(17, 24, 39, var(--a-s));
    --button-soft: rgba(var(--accent-rgb), var(--a-2xl));
    --button-strong: rgb(var(--accent-rgb));
    --button-primary-shadow: 0 7px 12px rgba(17, 24, 39, 0.16), 0 0 16px rgba(var(--accent-rgb), 0.16), 0 0 32px rgba(var(--accent-rgb), 0.10);
    --button-primary-shadow-hover: 0 10px 18px rgba(17, 24, 39, 0.18), 0 0 24px rgba(var(--accent-rgb), 0.30), 0 0 48px rgba(var(--accent-rgb), 0.20);
    --button-secondary-shadow: 0 6px 10px rgba(17, 24, 39, 0.13), 0 0 10px rgba(var(--accent-rgb), 0.09), 0 0 20px rgba(var(--accent-rgb), 0.06);
    --button-secondary-shadow-hover: 0 9px 16px rgba(17, 24, 39, 0.16), 0 0 14px rgba(var(--accent-rgb), 0.16), 0 0 28px rgba(var(--accent-rgb), 0.10);
    --button-primary-bg-start: #ffffff;
    --button-primary-bg-end: #fff4e8;
    --button-secondary-bg-start: #ffffff;
    --button-secondary-bg-end: #f7f8fa;
    --button-height: clamp(48px, calc((1380px + 30vw) / 31), 60px);
    --button-small-height: clamp(38px, calc((1124px + 15vw) / 31), 44px);
    --icon-box-size: clamp(40px, calc((1060px + 50vw) / 31), 60px);
    --icon-image-size: calc(var(--icon-box-size) * 0.86);
    --check-icon-size: 0.946em;
    --purple-glow-shadow: 0 0 4px 0 rgba(var(--purple-rgb), var(--a-2xl)), 0 0 24px 0 rgba(var(--purple-rgb), var(--a-xl));
}

/* Containers and cards */
.container {
    position: relative;
    z-index: 1;
    width: min(var(--page-container), calc(100% - (var(--outer-padding) * 2)));
    margin-inline: auto;
}

.notice-icon {
    display: block;
    flex: 0 0 auto;
    width: var(--icon-box-size);
    height: var(--icon-box-size);
    object-fit: contain;
    object-position: center;
}

.container-medium {
    max-width: 1000px;
    margin-inline: auto;
}

.container-small {
    max-width: 60%;
    margin-inline: auto;
}

.card {
    width: 100%;
    min-height: 100%;
    padding: var(--space-l);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.card:has(.card, .issue-list, .card-button) {
    background: var(--surface-bg);
}

.card:has(.section-title) {
    padding: var(--space-xl);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m);
}

/* Buttons */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-s);
    position: relative;
    isolation: isolate;
    min-height: var(--button-height);
    padding: var(--space-m) var(--space-l);
    border: 0;
    border-radius: var(--radius-s);
    font-weight: 800;
    min-width: calc(var(--button-height) * 2);
    width: auto;
    white-space: nowrap;
}

.button-primary, .button-secondary {
    color: var(--text);
}

.button::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.button-primary::before {
    border: 2px solid var(--button-strong);
    background: linear-gradient( 180deg, var(--button-primary-bg-start) 0%, var(--button-primary-bg-end) 100% );
    box-shadow: var(--button-primary-shadow);
}

.button-secondary::before {
    border: 1px solid var(--button-soft);
    background: linear-gradient( 180deg, var(--button-secondary-bg-start) 0%, var(--button-secondary-bg-end) 100% );
    box-shadow: var(--button-secondary-shadow);
}

.button-small {
    appearance: none;
    display: flex;
    align-items: center;
    gap: var(--space-s);
    width: 100%;
    min-height: var(--button-small-height);
    padding: var(--space-s) var(--space-m);
    border: 1px solid var(--button-soft);
    border-radius: var(--radius-s);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text);
    background: var(--surface);
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.actions:not(:last-child) {
    margin-bottom: var(--space-xl);
}

.card-button {
    justify-content: center;
    margin-top: auto;
}

/* Reveal states */
.reveal {
    opacity: 1;
    transform: none;
}

.js .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.js .reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Grid utilities */
.grid {
    display: grid;
    align-items: stretch;
    gap: var(--space-l);
}

.grid > .card {
    height: 100%;
}

.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stack-grid {
    display: grid;
    gap: var(--space-s);
}

/* Lists and icons */
.pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    list-style: none;
}

.pill-list li {
    flex: 0 0 auto;
    padding: var(--space-s);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    white-space: nowrap;
    background: var(--surface-soft);
    box-shadow: 0 8px 22px rgba(17, 24, 39, var(--a-xs));
}

.check-list {
    font-size: var(--font-m);
    line-height: 1.4;
    list-style: none;
}

.check-list li {
    display: flex;
    align-items: center;
    gap: var(--space-s);
}

.check-list li::before {
    content: "";
    flex: 0 0 var(--check-icon-size);
    width: var(--check-icon-size);
    height: var(--check-icon-size);
    background-color: #15803d;
    -webkit-mask: url("/assets/media/icons/check.svg") center / contain no-repeat;
    mask: url("/assets/media/icons/check.svg") center / contain no-repeat;
}

.icon-box {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: var(--icon-box-size);
    height: var(--icon-box-size);
    border: 1px solid rgba(var(--accent-rgb), var(--a-xl));
    border-radius: var(--radius-s);
    font-weight: 950;
    color: var(--accent-dark);
    background: var(--accent-light);
}

.icon-box img {
    width: var(--icon-image-size);
    height: var(--icon-image-size);
    object-fit: contain;
    object-position: center;
}

.icon-title-row {
    display: flex;
    align-items: center;
    gap: var(--space-s);
}

/* Links and accents */
.arrow-link {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    font-weight: 750;
    color: var(--accent-text);
}

.arrow-link-text {
    transition: text-shadow var(--transition-fast);
}

.arrow-icon {
    display: inline-block;
    flex: 0 0 1.2em;
    width: 1.2em;
    height: 0.8em;
    background-color: currentColor;
    transition: transform var(--transition-fast);
    -webkit-mask: url("/assets/media/icons/arrow-right.svg") center / contain no-repeat;
    mask: url("/assets/media/icons/arrow-right.svg") center / contain no-repeat;
}

.section-title-accent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-l);
}

.section-title-accent::before {
    flex: 0 0 calc(var(--decor-line-width) + 16px);
    margin-block-start: calc((1lh - 16px) / 2);
    content: "";
    width: calc(var(--decor-line-width) + 16px);
    height: 16px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, #ffb15c 0%, var(--accent) 55%, #f97316 100%) center / var(--decor-line-width) 3px no-repeat, rgba(var(--accent-rgb), var(--a-m));
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), var(--a-xs)), 0 0 0 5px rgba(var(--accent-rgb), var(--a-s)), 0 0 14px rgba(var(--accent-rgb), var(--a-l)), 0 0 28px rgba(var(--accent-rgb), var(--a-m));
}

/* Shared component layouts */
.hero-media, .case-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.price-card-body, .case-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: var(--space-l);
}

.notice-heading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    gap: var(--space-s);
}

/* Interactive states */
@media (any-hover: hover) and (any-pointer: fine) {
    .card-button:hover .arrow-icon {
        transform: translateX(0.6em);
    }

    .button-small:hover {
        box-shadow: 0 0 14px rgba(var(--accent-rgb), var(--a-l)), 0 0 30px rgba(var(--accent-rgb), var(--a-l));
    }

    .button:hover::before {
        transform: scale(1.06);
    }

    .button-primary:hover::before {
        box-shadow: var(--button-primary-shadow-hover);
    }

    .button-secondary:hover::before {
        box-shadow: var(--button-secondary-shadow-hover);
    }

    .button-secondary:hover::before, .button-small:hover {
        border-color: var(--button-strong);
    }

    .arrow-link:hover .arrow-icon {
        transform: translateX(0.6em);
    }

    .arrow-link:hover .arrow-link-text {
        text-shadow: 0 0 14px rgba(var(--accent-rgb), var(--a-2xl)), 0 0 28px rgba(var(--accent-rgb), var(--a-xl));
    }

    .purple-glow:hover {
        border-color: rgba(var(--purple-dark-rgb), var(--a-3xl));
        box-shadow: var(--purple-glow-shadow);
    }
}

/* Responsive grids */
@media (max-width: 1399px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }

    .grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1199px) {
    .grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

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