/* ==========================================================================
   قالب بنتو (Bento)
   همه‌چیز در کاشی‌های گرد و هم‌ارز، به سبک صفحه‌های معرفی اپل. در موبایل
   کاشی‌ها زیر هم می‌آیند و در دسکتاپ یک شبکه‌ی شش‌ستونه می‌سازند تا مهمان
   همه‌چیز را در یک نگاه ببیند. پالت پیش‌فرض تیره است؛ بقیه‌ی پالت‌ها روشن.
   ========================================================================== */

html[data-layout="bento"] {
    --b-bg: #000;
    --b-tile: #1c1c1e;
    --b-tile-2: #2c2c2e;
    --b-ink: #f5f5f7;
    --b-soft: #98989d;
    --b-accent: #bf9b5f;
    --b-accent-2: #e8c98f;
    --b-line: rgba(255, 255, 255, .1);
    --b-radius: 26px;

    --bg: var(--b-bg);
    --panel: var(--b-tile);
    --panel-2: var(--b-tile-2);
    --fg: var(--b-ink);
    --muted: var(--b-soft);
    --accent: var(--b-accent);
    --accent-soft: color-mix(in srgb, var(--b-accent) 18%, transparent);
    --line: var(--b-line);
    --sheet: var(--b-tile);
    --sheet-fg: var(--b-ink);
    --sheet-line: var(--b-line);
}
html[data-layout="bento"][data-theme="blue"] {
    --b-bg: #f2f2f7; --b-tile: #fff; --b-tile-2: #f5f5f7; --b-ink: #1d1d1f; --b-soft: #6e6e73;
    --b-accent: #0a6cff; --b-accent-2: #5ac8fa; --b-line: rgba(0, 0, 0, .08);
}
html[data-layout="bento"][data-theme="garden"] {
    --b-bg: #eef2ec; --b-tile: #fff; --b-tile-2: #f4f7f2; --b-ink: #1b2a1f; --b-soft: #66756a;
    --b-accent: #2f9e5b; --b-accent-2: #9ccc65; --b-line: rgba(0, 0, 0, .08);
}
html[data-layout="bento"][data-theme="blush"] {
    --b-bg: #f7efee; --b-tile: #fff; --b-tile-2: #fbf5f4; --b-ink: #2b1d1f; --b-soft: #7d6a6d;
    --b-accent: #d6406f; --b-accent-2: #ff9f7a; --b-line: rgba(0, 0, 0, .08);
}

html[data-layout="bento"] body { background: var(--b-bg); color: var(--b-ink); }
html[data-layout="bento"] .site,
html[data-layout="bento"] .gate { background: transparent; }

/* ---------- شبکه ---------- */
html[data-layout="bento"] .site {
    width: min(100% - 1.5rem, 74rem);
    margin: 0 auto;
    padding: .75rem 0 1rem;
    display: grid;
    gap: .75rem;
}
html[data-layout="bento"] .divider,
html[data-layout="bento"] .marquee { display: none; }

/* هر بخش یک کاشی */
html[data-layout="bento"] .hero,
html[data-layout="bento"] .band,
html[data-layout="bento"] .closing {
    width: auto;
    margin: 0;
    background: var(--b-tile);
    border-radius: var(--b-radius);
    overflow: hidden;
}
html[data-layout="bento"] .band { padding: 1.5rem 1.3rem 1.6rem; }
html[data-layout="bento"] .band:first-of-type { padding-top: 1.5rem; }

/* عنوان کاشی: برچسب کوچک بالای کاشی، نه تیتر وسط صفحه */
html[data-layout="bento"] .section-title {
    margin: 0 0 1.1rem;
    text-align: start;
    font-size: .95rem;
    font-weight: 700;
    color: var(--b-soft);
}
html[data-layout="bento"] .section-sub { text-align: start; color: var(--b-soft); margin-top: -.6rem; }

/* کارت داخل کاشی قاب دوم ندارد */
html[data-layout="bento"] .band .card,
html[data-layout="bento"] .rsvp-sheet {
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
html[data-layout="bento"] .card-eyebrow { color: var(--b-soft); font-weight: 600; }
html[data-layout="bento"] .card-title { color: var(--b-ink); font-weight: 800; font-size: 1.8rem; line-height: 1.5; }
html[data-layout="bento"] .card-sub,
html[data-layout="bento"] .hint,
html[data-layout="bento"] .hotel-addr,
html[data-layout="bento"] .copy-label,
html[data-layout="bento"] .cd-label,
html[data-layout="bento"] .notes cite,
html[data-layout="bento"] .notice-body,
html[data-layout="bento"] .polaroid figcaption { color: var(--b-soft); }
html[data-layout="bento"] .card-body,
html[data-layout="bento"] .card-date,
html[data-layout="bento"] .invite-text,
html[data-layout="bento"] .note-b,
html[data-layout="bento"] .note-h,
html[data-layout="bento"] .tl-title,
html[data-layout="bento"] .tl-time,
html[data-layout="bento"] .notes p,
html[data-layout="bento"] .notice-title { color: var(--b-ink); }
html[data-layout="bento"] .rule { background: var(--b-line); }
html[data-layout="bento"] .card-icon,
html[data-layout="bento"] .card-actions svg,
html[data-layout="bento"] .hotel-links svg,
html[data-layout="bento"] .card-time svg { color: var(--b-accent); }
html[data-layout="bento"] .card-figure { border: 0; border-radius: 18px; }
html[data-layout="bento"] .card-actions a,
html[data-layout="bento"] .hotel-links a,
html[data-layout="bento"] .copy-row {
    border: 0;
    border-radius: 14px;
    background: var(--b-tile-2);
    color: var(--b-ink);
    font-weight: 600;
}
html[data-layout="bento"] .card-actions a:hover,
html[data-layout="bento"] .hotel-links a:hover { background: var(--accent-soft); }
html[data-layout="bento"] .card-actions.cal-row a { border: 0; background: var(--accent-soft); color: var(--b-accent); }

/* ---------- کاشی اول: عکس + اسم‌ها ---------- */
html[data-layout="bento"] .hero {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    padding: .6rem;
    align-items: stretch;
}
html[data-layout="bento"] .hero-media {
    position: relative;
    inset: auto;
    aspect-ratio: 4 / 3;
    border-radius: calc(var(--b-radius) - .6rem);
}
html[data-layout="bento"] .hero-veil { display: none; }
html[data-layout="bento"] .hero-text { position: static; width: auto; padding: 1.4rem .8rem .2rem; text-align: start; }
html[data-layout="bento"] .hero-quote {
    margin: 0 0 .8rem;
    max-width: none;
    font-size: .88rem;
    line-height: 2;
    color: var(--b-soft);
    opacity: 1;
}
html[data-layout="bento"] .script-names {
    font-weight: 800;
    font-size: clamp(2.6rem, 13vw, 4.4rem);
    line-height: 1.3;
    text-shadow: none;
    background: linear-gradient(100deg, var(--b-ink) 30%, var(--b-accent) 75%, var(--b-accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
html[data-layout="bento"] .script-names .amp { -webkit-text-fill-color: var(--b-soft); font-size: .4em; margin: 0 .3em; opacity: 1; }
html[data-layout="bento"] .hero-corner {
    position: static;
    padding: .6rem .8rem 1rem;
    justify-items: start;
    text-align: start;
}
html[data-layout="bento"] .hero-corner .rule { display: none; }
html[data-layout="bento"] .hero-meta { gap: .5rem; }
html[data-layout="bento"] .hero-date,
html[data-layout="bento"] .hero-city {
    padding: .35rem .85rem;
    border-radius: 999px;
    background: var(--b-tile-2);
    color: var(--b-ink);
    font-size: .85rem;
    font-weight: 600;
}
html[data-layout="bento"] .hero-date + .hero-city::before { display: none; }
html[data-layout="bento"] .scroll-hint { display: none; }

/* ---------- شمارش معکوس: عددهای خیلی درشت ---------- */
html[data-layout="bento"] .countdown-band {
    display: grid;
    align-content: center;
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--b-accent) 22%, transparent), transparent 60%),
        var(--b-tile);
}
html[data-layout="bento"] .countdown-band .script-line { margin-bottom: .8rem; font-size: 1rem; font-weight: 700; color: var(--b-soft); }
html[data-layout="bento"] .countdown { gap: .2rem; justify-content: space-around; }
html[data-layout="bento"] .cd-sep { display: none; }
html[data-layout="bento"] .cd-num {
    font-weight: 800;
    font-size: clamp(2.8rem, 14vw, 3.8rem);
    line-height: 1.1;
    color: var(--b-accent);
}
html[data-layout="bento"] .cd-label { font-weight: 600; }

/* ---------- دعوت ---------- */
html[data-layout="bento"] .invite { text-align: start; display: grid; align-content: center; }
html[data-layout="bento"] .addressee { color: var(--b-ink); font-weight: 800; font-size: 1.5rem; }
html[data-layout="bento"] .invite-text { margin-inline: 0; }
html[data-layout="bento"] .script-line { color: var(--b-ink); font-weight: 700; text-align: start; }
html[data-layout="bento"] .countdown-band .script-line { text-align: center; }

/* ---------- میز: یک عدد بزرگ ---------- */
html[data-layout="bento"] .band:has(.table-card),
html[data-layout="bento"] .band:has(.qr-card) { display: grid; align-content: center; }
html[data-layout="bento"] .table-no {
    font-weight: 800;
    font-size: 5.5rem;
    line-height: 1.1;
    color: var(--b-accent);
}

/* ---------- برنامه ---------- */
html[data-layout="bento"] .timeline { gap: .5rem; }
html[data-layout="bento"] .timeline li {
    padding: .55rem .7rem;
    border-radius: 14px;
    background: var(--b-tile-2);
}
html[data-layout="bento"] .tl-icon { border: 0; background: var(--b-tile); color: var(--b-accent); border-radius: 10px; }
html[data-layout="bento"] .tl-dots { opacity: 0; }
html[data-layout="bento"] .tl-time { font-weight: 700; }
html[data-layout="bento"] .tl-title { font-weight: 600; }
html[data-layout="bento"] .notelist li { padding: .6rem; border-radius: 14px; background: var(--b-tile-2); }

/* ---------- گالری: کاشی‌های عکس بدون قاب ---------- */
html[data-layout="bento"] .gallery { gap: .5rem; }
html[data-layout="bento"] .polaroid {
    position: relative;
    padding: 0;
    background: none;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: none;
    transform: none !important;
}
html[data-layout="bento"] .polaroid img { filter: none; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
html[data-layout="bento"] .polaroid:hover img { transform: scale(1.04); }
html[data-layout="bento"] .polaroid figcaption {
    position: absolute;
    inset: auto .5rem .5rem;
    margin: 0;
    padding: .2rem .6rem;
    width: fit-content;
    border-radius: 999px;
    background: rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: .72rem;
    opacity: 1;
}
html[data-layout="bento"] .dress-img { border-radius: 18px; }

/* ---------- پیام‌ها ---------- */
html[data-layout="bento"] .notes { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .6rem; }
html[data-layout="bento"] .notes blockquote,
html[data-layout="bento"] .notice {
    border: 0;
    border-radius: 18px;
    background: var(--b-tile-2);
}

/* ---------- پاسخ ---------- */
html[data-layout="bento"] .rsvp-band { padding: 1.5rem 1.3rem 1.6rem; }
html[data-layout="bento"] .rsvp-head { text-align: start; }
html[data-layout="bento"] .rsvp-head .script-line { color: var(--b-ink); font-size: 1.5rem; font-weight: 800; }
html[data-layout="bento"] .rsvp-form label { color: var(--b-ink); }
html[data-layout="bento"] .rsvp-form input,
html[data-layout="bento"] .rsvp-form select,
html[data-layout="bento"] .rsvp-form textarea,
html[data-layout="bento"] .gate-field input {
    border: 1px solid transparent;
    border-radius: 14px;
    background: var(--b-tile-2);
    color: var(--b-ink);
}
html[data-layout="bento"] .rsvp-form input:focus,
html[data-layout="bento"] .rsvp-form select:focus,
html[data-layout="bento"] .rsvp-form textarea:focus { border-color: var(--b-accent); outline: none; }
html[data-layout="bento"] .choice-opt { border: 0; border-radius: 14px; background: var(--b-tile-2); color: var(--b-ink); }
html[data-layout="bento"] .choice-opt:has(input:checked) { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--b-accent); }
html[data-layout="bento"] .answered { border-radius: 14px; }
html[data-layout="bento"] .more-details summary { color: var(--b-soft); }
html[data-layout="bento"] .btn {
    border: 0;
    border-radius: 999px;
    background: var(--b-tile-2);
    color: var(--b-ink);
    font-weight: 700;
}
html[data-layout="bento"] .rsvp-sheet .btn-ghost { background: var(--b-tile-2); color: var(--b-ink); }
html[data-layout="bento"] .btn-solid { background: var(--b-accent); color: #fff; }
html[data-layout="bento"]:not([data-theme="blue"]):not([data-theme="garden"]):not([data-theme="blush"]) .btn-solid { color: #111; }

/* ---------- پایان، چاپ، پاورقی ---------- */
html[data-layout="bento"] .closing { min-height: 22rem; }
html[data-layout="bento"] .closing-veil { background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1) 70%); }
html[data-layout="bento"] .closing-text .script-names {
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
}
html[data-layout="bento"] .closing-text .script-names .amp { -webkit-text-fill-color: rgba(255, 255, 255, .7); }
html[data-layout="bento"] .closing-text .hero-quote { color: rgba(255, 255, 255, .85); }
html[data-layout="bento"] .print-row { margin: .4rem 0 0; }
html[data-layout="bento"] .site-footer { background: transparent; color: var(--b-soft); }
html[data-layout="bento"] .site-footer a { color: var(--b-accent); }

/* ---------- ورود ---------- */
html[data-layout="bento"] .gate { align-items: center; padding: .75rem; }
html[data-layout="bento"] .gate-media { inset: .75rem .75rem auto; height: 46vh; border-radius: var(--b-radius); }
html[data-layout="bento"] .gate-veil { display: none; }
html[data-layout="bento"] .gate-inner {
    align-self: end;
    padding: 2rem 1.4rem 1.6rem;
    background: var(--b-tile);
    border-radius: var(--b-radius);
}
html[data-layout="bento"] .gate-inner .script-names { font-size: clamp(2.2rem, 10vw, 3rem); }
html[data-layout="bento"] .gate-form label,
html[data-layout="bento"] .gate-meta,
html[data-layout="bento"] .gate-help,
html[data-layout="bento"] .eyebrow { color: var(--b-soft); }
html[data-layout="bento"] .gate-meta .dot { background: var(--b-accent); }
html[data-layout="bento"] .gate-head .rule { background: var(--b-accent); }

/* ---------- نوار پایین و دکمه‌ها ---------- */
html[data-layout="bento"] .quickbar {
    margin: 0 .6rem calc(.6rem + env(safe-area-inset-bottom));
    padding: .45rem;
    border: 0;
    border-radius: 22px;
    background: color-mix(in srgb, var(--b-tile) 82%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
html[data-layout="bento"] .quickbar a { color: var(--b-ink); }
html[data-layout="bento"] .quickbar a svg { color: var(--b-accent); }
html[data-layout="bento"] .quickbar .qb-main { background: var(--b-accent); color: #fff; border-radius: 16px; }
html[data-layout="bento"] .quickbar .qb-main svg { color: #fff; }
html[data-layout="bento"] .tool-btn {
    border: 0;
    background: color-mix(in srgb, var(--b-tile) 82%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    color: var(--b-ink);
}
html[data-layout="bento"] .seal { border-color: var(--b-accent); color: var(--b-accent); }

/* ---------- دسکتاپ: شبکه‌ی شش‌ستونه با چیدمان فشرده ---------- */
@media (min-width: 900px) {
    html[data-layout="bento"] .site {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-auto-flow: row dense;
        gap: 1rem;
        padding-top: 1.2rem;
    }
    html[data-layout="bento"] .site > * { grid-column: span 6; }

    html[data-layout="bento"] .hero {
        grid-template-columns: 1.35fr 1fr;
        grid-template-rows: 1fr auto;
        min-height: 30rem;
        padding: .8rem;
    }
    html[data-layout="bento"] .hero-media { grid-row: 1 / 3; aspect-ratio: auto; height: 100%; min-height: 28rem; }
    html[data-layout="bento"] .hero-text { align-self: center; padding: 2rem 2rem 0; }
    html[data-layout="bento"] .hero-corner { padding: 1rem 2rem 1.6rem; }
    html[data-layout="bento"] .script-names { font-size: clamp(3.4rem, 6vw, 6rem); }

    html[data-layout="bento"] .countdown-band { grid-column: span 2; }
    html[data-layout="bento"] .invite { grid-column: span 4; }
    html[data-layout="bento"] #details { grid-column: span 4; }
    html[data-layout="bento"] .band:has(.table-card),
    html[data-layout="bento"] #entry,
    html[data-layout="bento"] #dress,
    html[data-layout="bento"] #notes { grid-column: span 2; }
    html[data-layout="bento"] #schedule { grid-column: span 4; }
    html[data-layout="bento"] #gifts,
    html[data-layout="bento"] #rsvp { grid-column: span 3; }
    html[data-layout="bento"] #hotels { grid-column: span 4; }
    html[data-layout="bento"] #gallery,
    html[data-layout="bento"] #guestbook { grid-column: span 6; }
    html[data-layout="bento"] .gallery { grid-template-columns: repeat(3, 1fr); }
    /* عکس اول بزرگ، فقط وقتی تعداد عکس‌ها مضرب سه است تا ردیف آخر ناقص نماند */
    html[data-layout="bento"] .gallery .polaroid:first-child:nth-last-child(3n) { grid-column: span 2; grid-row: span 2; }
    html[data-layout="bento"] .gallery .polaroid:first-child:nth-last-child(3n) img { height: 100%; aspect-ratio: auto; }
    html[data-layout="bento"] .details-card { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: center; }
    html[data-layout="bento"] .details-card .card-figure img { min-height: 15rem; }
    html[data-layout="bento"] .band { padding: 1.8rem 1.8rem 2rem; }
    html[data-layout="bento"] .rsvp-band { padding: 1.8rem; }
    html[data-layout="bento"] .closing { min-height: 26rem; }
    html[data-layout="bento"] .quickbar { display: none; }
}
@media (min-width: 1200px) {
    html[data-layout="bento"] .countdown-band { grid-column: span 2; }
}