/* ==================================================
   ESMAC 2026 — Registration / Sponsorship / Places to Visit
   Load order: style.css -> committee.css -> info-pages.css
================================================== */

/* ---- shared white card ---- */
.panel {
    position: relative;
    overflow: hidden;
    padding: 30px 30px 28px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.panel::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: var(--grad-brand);
}

.panel:hover {
    transform: translateY(-4px);
    border-color: rgba(31, 154, 61, 0.4);
    box-shadow: var(--shadow-md);
}

.panel-title {
    font-family: var(--serif);
    font-size: 26px;
    line-height: 1.2;
    color: var(--navy);
    margin-bottom: 18px;
}

/* ---- body paragraphs ---- */
.body-text {
    max-width: 880px;
    margin: 0 auto 18px;
    font-size: 16px;
    color: var(--muted);
}

.body-text.center-text { text-align: center; margin-bottom: 44px; font-size: 17px; }

/* ==================================================
   REGISTRATION
================================================== */

.fee-list {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fee-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.fee-row::before {
    content: "";
    flex-shrink: 0;
    width: 20px; height: 20px;
    background: var(--grad-blue);
    clip-path: var(--hex);
    transition: background 0.2s, transform 0.4s;
}

.fee-row:hover {
    transform: translateY(-3px);
    border-color: rgba(31, 154, 61, 0.4);
    box-shadow: var(--shadow-md);
}

.fee-row:hover::before { background: var(--grad-green); transform: rotate(60deg); }

.fee-row .who {
    flex: 1;
    font-family: var(--serif);
    font-size: 21px;
    color: var(--navy);
}

.fee-row .price {
    padding: 6px 18px;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--blue);
    background: var(--soft);
    border-radius: 999px;
}

/* template downloads */
.doc-list {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.doc-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 600;
    color: var(--blue);
    transition: color 0.2s;
}

.doc-link::before {
    content: "";
    flex-shrink: 0;
    width: 18px; height: 18px;
    background: var(--grad-green);
    clip-path: var(--hex);
}

.doc-link:hover { color: var(--green); text-decoration: underline; }

.doc-list .panel p {
    margin-top: 14px;
    color: var(--muted);
    font-size: 15.5px;
}

/* bank details + QR */
.reg-grid {
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 30px;
    align-items: stretch;
}

.bank-row {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.bank-row:last-child { border-bottom: none; padding-bottom: 0; }

.bank-row dt {
    flex: 0 0 150px;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
}

.bank-row dd {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: var(--navy);
    word-break: break-word;
}

.qr-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.qr-card img {
    width: 100%;
    max-width: 300px;
    border-radius: 14px;
}

/* ==================================================
   SPONSORSHIP
================================================== */

.tier-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    align-items: stretch;
}

.tier { padding: 34px 24px 28px; }

.tier::before { background: var(--tier-bar); }

.tier-platinum { --tier-bar: linear-gradient(90deg, #52628a, #a9b6d3); --tier-ink: #3b4a6e; }
.tier-gold     { --tier-bar: linear-gradient(90deg, #b9800f, #f0c04a); --tier-ink: #a06d08; }
.tier-silver   { --tier-bar: linear-gradient(90deg, #7d8797, #c5ccd8); --tier-ink: #5d6673; }
.tier-stall    { --tier-bar: var(--grad-green);                        --tier-ink: var(--green); }

.tier h3 {
    font-family: var(--serif);
    font-size: 25px;
    line-height: 1.2;
    color: var(--navy);
}

.tier-price {
    margin: 10px 0 20px;
    padding-bottom: 18px;
    font-family: var(--display);
    font-size: 27px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--tier-ink);
    border-bottom: 1px solid var(--line);
}

.tier ul li {
    position: relative;
    padding: 8px 0 8px 26px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
}

.tier ul li::before {
    content: "";
    position: absolute;
    left: 0; top: 15px;
    width: 12px; height: 12px;
    background: var(--tier-bar);
    clip-path: var(--hex);
}

/* ==================================================
   PLACES TO VISIT
================================================== */

.places-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 40px;
    align-items: start;
}

.places-photo {
    position: sticky;
    top: 96px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    background: linear-gradient(135deg, var(--navy-deep), var(--navy) 60%, var(--blue));
}

.places-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.place-list { display: flex; flex-direction: column; gap: 14px; }

.place {
    display: flex;
    gap: 16px;
    padding: 18px 22px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.place::before {
    content: "";
    flex-shrink: 0;
    width: 20px; height: 20px;
    margin-top: 4px;
    background: var(--grad-blue);
    clip-path: var(--hex);
    transition: background 0.2s, transform 0.4s;
}

.place:hover {
    transform: translateY(-3px);
    border-color: rgba(31, 154, 61, 0.4);
    box-shadow: var(--shadow-md);
}

.place:hover::before { background: var(--grad-green); transform: rotate(60deg); }

.place p { font-size: 15px; color: var(--muted); }

.place strong {
    font-family: var(--serif);
    font-size: 17px;
    letter-spacing: 0.3px;
    color: var(--navy);
}

/* how to reach */
.reach-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

.reach-card h3 {
    font-family: var(--serif);
    font-size: 26px;
    color: var(--navy);
    margin-bottom: 14px;
}

.reach-card p { font-size: 15px; color: var(--muted); }

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

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

@media (max-width: 900px) {
    .reg-grid,
    .places-grid,
    .reach-grid { grid-template-columns: 1fr; }

    .places-photo { position: relative; top: 0; aspect-ratio: 16 / 10; }
}

@media (max-width: 560px) {
    .tier-grid { grid-template-columns: 1fr; }
    .panel { padding: 26px 22px 24px; }
    .fee-row { flex-wrap: wrap; padding: 16px 18px; }
    .fee-row .who { font-size: 19px; }
    .bank-row { flex-direction: column; gap: 2px; }
    .bank-row dt { flex: none; }
}