/* css/components.css — the pieces that are specific to this brand. */

/* ================================================================ HERO
   Kadappa ground, ivory type, one gold hairline. The photograph is optional
   because most of our Kerala venues are not ours to illustrate yet, and an
   empty hero should still look deliberate rather than broken. */
.hero {
  background: var(--kadappa);
  color: var(--ivory);
  padding: clamp(4rem, 3rem + 8vw, 9rem) 0 clamp(3rem, 2rem + 5vw, 6rem);
  position: relative;
  overflow: hidden;
}
.hero::after {
  /* a faint woven texture, drawn not loaded */
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(201,169,97,0.05) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg,  rgba(201,169,97,0.04) 0 1px, transparent 1px 7px);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { max-width: 18ch; margin-bottom: var(--s-5); }
.hero .lede { color: #c3bcac; max-width: 54ch; font-size: var(--t-md); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-6); }
.hero-actions .btn-primary { background: var(--zari); border-color: var(--zari); color: #14161a; }
.hero-actions .btn-primary:hover { background: var(--brass); border-color: var(--brass); }
.hero-actions .btn-ghost { color: var(--ivory); }

.hero-stats {
  display: flex; flex-wrap: wrap; gap: var(--s-7);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid #2f343a;
}
.hero-stats div b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-xl);
  color: var(--brass);
  font-weight: 400;
}
.hero-stats div span { font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: #948d7e; }

/* ================================================================ MUHURTHAM BAND
   The signature block. Twelve Malayalam months, colour-coded by whether Kerala
   marries in them. This is the thing the site is known for, so it is static
   HTML and it works with CSS off. */
.muhurtham {
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.muhurtham-head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: var(--s-4);
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.muhurtham-head h2 { margin: 0; font-size: var(--t-lg); }
.muhurtham-key { display: flex; flex-wrap: wrap; gap: var(--s-4); font-size: var(--t-xs); }
.muhurtham-key b { display: flex; align-items: center; gap: var(--s-2); font-weight: 400; color: var(--muted); }
.muhurtham-key i {
  width: 11px; height: 11px; border-radius: 50%; display: inline-block;
  border: 1px solid rgba(0,0,0,0.12);
}
.muhurtham-key b[data-state='held'] i    { background: var(--leaf); }
.muhurtham-key b[data-state='part'] i    { background: linear-gradient(90deg, var(--leaf) 50%, var(--kumkumam) 50%); }
.muhurtham-key b[data-state='avoided'] i { background: var(--kumkumam); }

.muhurtham-months {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 900px) { .muhurtham-months { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .muhurtham-months { grid-template-columns: repeat(2, 1fr); } }

.month {
  padding: var(--s-4);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.month::before {
  content: '';
  position: absolute; inset: 0 auto 0 0; width: 3px;
}
.month[data-state='held']::before    { background: var(--leaf); }
.month[data-state='avoided']::before { background: var(--kumkumam); }
.month[data-state='part']::before    { background: linear-gradient(180deg, var(--leaf) 50%, var(--kumkumam) 50%); }
.month b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 400;
}
.month em {
  display: block; font-style: normal;
  font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--zari); margin-bottom: var(--s-3);
}
.month span { font-size: var(--t-sm); color: var(--muted); line-height: 1.45; }

.faith-notes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
}
@media (max-width: 780px) { .faith-notes { grid-template-columns: 1fr; } }
.faith-note {
  padding: var(--s-5);
  border-right: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
}
.faith-note h3 {
  font-family: var(--font-body);
  font-size: var(--t-xs); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--zari); margin-bottom: var(--s-3);
}
.faith-note p { font-size: var(--t-sm); }
.faith-note p:first-of-type { color: var(--fg); }
.faith-note p:last-of-type { color: var(--muted); margin-bottom: 0; }

/* ================================================================ CARDS */
.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
a.card:hover {
  border-color: var(--zari);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.card h3 { margin-bottom: var(--s-2); }
.card p { font-size: var(--t-sm); color: var(--muted); margin-bottom: 0; }
.card-meta {
  font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--zari); margin-bottom: var(--s-3);
}

/* venue card, with an honest tile where we have no photograph of our own */
.venue-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.venue-card .shot { aspect-ratio: 4 / 3; background: var(--paper-warm); overflow: hidden; }
.venue-card .shot img { width: 100%; height: 100%; object-fit: cover; }
.venue-card .no-shot {
  aspect-ratio: 4 / 3;
  display: grid; place-content: center; text-align: center;
  gap: var(--s-2); padding: var(--s-5);
  background:
    repeating-linear-gradient(135deg, var(--paper-warm) 0 10px, #ece3cd 10px 20px);
  color: var(--slate);
  font-size: var(--t-xs); letter-spacing: 0.08em;
}
.venue-card .body { padding: var(--s-5); flex: 1; display: flex; flex-direction: column; }
.venue-card h3 { font-size: var(--t-md); }
.venue-card .facts {
  margin-top: auto; padding-top: var(--s-4);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  font-size: var(--t-xs); color: var(--muted);
  border-top: 1px solid var(--rule);
}
.venue-card .facts b { font-weight: 400; color: var(--fg); }

/* ================================================================ TABLES */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data {
  width: 100%; border-collapse: collapse; font-size: var(--t-sm);
  min-width: 520px;
}
table.data caption {
  text-align: left; font-size: var(--t-xs); color: var(--muted);
  padding-bottom: var(--s-3);
}
table.data th, table.data td {
  text-align: left; padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
table.data th {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--zari);
  border-bottom-color: var(--rule-strong);
}
table.data tbody tr:hover { background: var(--paper-warm); }

/* the two-column planner fact list on community pages */
.planner-facts { border-top: 1px solid var(--rule-strong); margin: var(--s-6) 0; }
.planner-facts div {
  display: grid; grid-template-columns: 13rem 1fr; gap: var(--s-4);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--rule);
}
@media (max-width: 620px) { .planner-facts div { grid-template-columns: 1fr; gap: var(--s-1); } }
.planner-facts dt, .planner-facts b {
  font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--zari); font-weight: 400;
}
.planner-facts span { font-size: var(--t-sm); }

/* ================================================================ ANSWER BLOCK
   Engineered to be quotable by an assistant: one question, one self-contained
   answer, no pronouns reaching outside the block. */
.answer-block {
  border-left: 3px solid var(--zari);
  background: var(--paper-warm);
  padding: var(--s-5);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  margin: var(--s-6) 0;
}
.answer-block h3 { font-size: var(--t-md); margin-bottom: var(--s-3); }
.answer-block p:last-child { margin-bottom: 0; }

.faq details {
  border-bottom: 1px solid var(--rule);
  padding: var(--s-4) 0;
}
.faq summary {
  cursor: pointer; font-family: var(--font-display); font-size: var(--t-md);
  list-style: none; display: flex; justify-content: space-between; gap: var(--s-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--zari); font-size: 1.3em; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin-top: var(--s-3); color: var(--muted); font-size: var(--t-sm); max-width: 68ch; }

/* ================================================================ FILTERS */
.filters {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  padding: var(--s-4) 0 var(--s-5);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-6);
}
.filters button {
  font: inherit; font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase;
  background: none; border: 1px solid var(--rule-strong); color: var(--muted);
  padding: var(--s-2) var(--s-4); border-radius: 999px; cursor: pointer;
  transition: all 0.2s var(--ease);
}
.filters button:hover { border-color: var(--zari); color: var(--fg); }
.filters button[aria-pressed='true'] {
  background: var(--kadappa); border-color: var(--kadappa); color: var(--ivory);
}
.filter-count { font-size: var(--t-sm); color: var(--muted); margin-bottom: var(--s-5); }

/* ================================================================ FORM */
.enquire {
  background: var(--kadappa); color: var(--ivory);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
}
.enquire h2 { color: var(--ivory); }
.enquire .lede { color: #b9b2a2; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-6); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass);
}
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--t-sm);
  background: #1e2226; color: var(--ivory);
  border: 1px solid #343a41; border-radius: var(--radius);
  padding: 0.8em 0.9em;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--zari);
}
.field input::placeholder, .field textarea::placeholder { color: #6d7580; }
#form-status { margin-top: var(--s-4); font-size: var(--t-sm); }
#form-status[data-state='error'] { color: #e8a49c; }
.enquire .answer { padding: var(--s-4) 0; }
.enquire .answer h3 { color: var(--brass); }

/* ================================================================ GALLERY */
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
@media (max-width: 780px) { .shots { grid-template-columns: repeat(2, 1fr); } }
.shots img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; border-radius: var(--radius); }

/* honest note where we have no photography of our own */
.no-photos {
  border: 1px dashed var(--rule-strong);
  padding: var(--s-5);
  border-radius: var(--radius-lg);
  color: var(--muted);
  font-size: var(--t-sm);
  background: var(--paper-warm);
}

/* ================================================================ LIST LINKS */
.link-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--s-7); }
@media (max-width: 640px) { .link-list { columns: 1; } }
.link-list li { break-inside: avoid; padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); }
.link-list a { text-decoration: none; font-size: var(--t-sm); }
.link-list a:hover { color: var(--zari); }
.link-list span { color: var(--muted); font-size: var(--t-xs); }