/* ============================================================
   PAC RESORT — gallery, testimonials, FAQ, forms
   ============================================================ */

/* ---------- Gallery & lightbox ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; grid-auto-flow: dense; gap: 16px; }
.gallery-item { position: relative; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; }
.gallery-item--wide { grid-column: span 2; }
.gallery-item--tall { grid-row: span 2; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.gallery-item::after { content: ""; position: absolute; inset: 0; background: rgba(6, 35, 27, 0.45); opacity: 0; transition: opacity 0.4s; }
.gallery-item i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.6); color: var(--clr-white); font-size: 1.6rem; opacity: 0; transition: 0.4s var(--ease); z-index: 2; }
.gallery-item:hover img { transform: scale(1.1); }
.gallery-item:hover::after { opacity: 1; }
.gallery-item:hover i { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.lightbox { position: fixed; inset: 0; background: rgba(6, 35, 27, 0.92); z-index: 5000; display: grid; place-items: center; padding: 24px; opacity: 0; visibility: hidden; transition: 0.35s var(--ease); }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__wrap { position: relative; max-width: 900px; width: 100%; }
.lightbox__img { width: 100%; max-height: 80vh; object-fit: contain; border-radius: var(--radius); }
.lightbox__cap { color: var(--clr-white); text-align: center; margin-top: 14px; font-size: 0.95rem; }
.lightbox__close { position: absolute; top: -52px; right: 0; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); color: var(--clr-white); font-size: 1.3rem; display: grid; place-items: center; transition: 0.3s; }
.lightbox__close:hover { background: var(--clr-accent); color: var(--clr-primary-dark); }

/* ---------- Testimonials ---------- */
.t-viewport { overflow: hidden; }
.t-track { display: flex; transition: transform 0.7s var(--ease); }
.t-slide { min-width: 100%; padding: 6px; }
.t-card { max-width: 820px; margin-inline: auto; text-align: center; background: var(--clr-white); padding: clamp(28px, 5vw, 48px); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.t-card__quote { font-size: clamp(1.05rem, 2vw, 1.3rem); font-family: var(--font-display); font-style: italic; color: var(--clr-ink); line-height: 1.6; margin-bottom: 24px; }
.t-card__stars { color: var(--clr-accent); margin-bottom: 18px; font-size: 0.9rem; }
.t-card__person { display: flex; align-items: center; justify-content: center; gap: 14px; text-align: left; }
.t-card__person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.t-card__person .avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-soft)); color: var(--clr-white); display: grid; place-items: center; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; flex-shrink: 0; }
.t-card__person b { display: block; color: var(--clr-primary-dark); }
.t-card__person span { font-size: 0.85rem; color: var(--clr-muted); }
.t-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 30px; }
.t-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--clr-line); display: grid; place-items: center; transition: 0.3s; }
.t-btn:hover { background: var(--clr-accent); border-color: var(--clr-accent); color: var(--clr-primary-dark); }
.t-dots { display: flex; gap: 8px; }
.t-dots button { width: 10px; height: 10px; border-radius: 999px; background: rgba(12, 59, 46, 0.2); transition: 0.3s; }
.t-dots button.is-active { width: 28px; background: var(--clr-accent); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; margin-inline: auto; display: grid; gap: 14px; }
.faq-item { background: var(--clr-white); border: 1px solid var(--clr-line); border-radius: var(--radius-sm); overflow: hidden; }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; font-weight: 600; font-size: 1.02rem; color: var(--clr-primary-dark); text-align: left; }
.faq-q i { transition: transform 0.4s var(--ease); color: var(--clr-accent); flex-shrink: 0; }
.faq-item.open .faq-q i { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease); }
.faq-a p { padding: 0 24px 22px; font-size: 0.95rem; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--clr-primary-dark); }
.field input, .field select, .field textarea { padding: 14px 16px; border: 1px solid var(--clr-line); border-radius: var(--radius-sm); background: var(--clr-white); transition: border-color 0.3s, box-shadow 0.3s; width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--clr-accent); box-shadow: 0 0 0 4px rgba(201, 162, 75, 0.15); }
.field textarea { resize: vertical; min-height: 120px; }
.field input.is-invalid, .field select.is-invalid, .field textarea.is-invalid { border-color: #d9534f; box-shadow: 0 0 0 4px rgba(217, 83, 79, 0.12); }
.success { display: none; padding: 18px 22px; border-radius: var(--radius-sm); background: #e8f5ee; border: 1px solid #b7dfc8; color: #1c5c3d; font-weight: 500; margin-bottom: 20px; }
.success.is-visible { display: block; animation: fadeIn 0.5s var(--ease); }