/* G.S. Linganathan Textiles — layout and components (mobile-first).
   Signature: the fixed pallu stripe lives in .pallu-stripe; nothing else repeats it. */

.wrap { width: min(calc(100% - var(--gutter) * 2), var(--max-w)); margin-inline: auto; }

/* ── Signature: 12px saffron pallu stripe (8px ≤360), 2px indigo weft every 48px ── */
.pallu-stripe {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--stripe-w);
  z-index: 21;
  pointer-events: none;
  background-color: var(--c-tint);
  background-image: repeating-linear-gradient(to bottom, transparent 0 46px, var(--c-accent) 46px 48px);
}

/* ── Header ── */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.header-inner { display: flex; align-items: center; gap: 10px; min-height: 64px; }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; flex: none; color: var(--c-ink); font: 700 1.55rem/1 var(--font-display); text-decoration: none; white-space: nowrap; }
.desktop-nav, .header-inner .header-cta { display: none; }
.lang-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; position: relative; z-index: 22; }
.header-inner > .lang-switch { margin-inline-start: auto; }
.lang-switch a { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 6px 4px; border-bottom: 2px solid transparent; color: var(--c-muted); font-size: .8rem; text-decoration: none; }
.lang-switch a[aria-current="true"] { color: var(--c-ink); border-color: var(--c-accent); }
.lang-switch a:hover { background: var(--c-tint); }
.icon-button { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--c-line); border-radius: var(--r-sm); background: transparent; color: var(--c-ink); }
.icon-button:hover { background: var(--c-tint); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border: 1.5px solid var(--c-accent); border-radius: var(--r-lg); background: var(--c-accent); color: var(--c-accent-ink); font-weight: 600; line-height: 1.5; text-align: center; text-decoration: none; transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease; }
.button:hover { background: #252C6E; border-color: #252C6E; }
.secondary { background: transparent; color: var(--c-accent); }
.secondary:hover { background: var(--c-tint); border-color: var(--c-accent); }

/* ── Hero ── */
.hero { background: var(--c-bg); }
.hero-figure { position: relative; }
.hero-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; animation: hero-image-in 520ms var(--ease) both; }
.hero-image-note { position: absolute; top: 12px; inset-inline-end: 12px; padding: 4px 8px; border-radius: var(--r-lg); background: rgb(26 35 66 / .9); color: var(--c-bg); font-size: .6875rem; }
.hero-copy { position: relative; z-index: 1; margin-top: -47.5%; padding: 24px var(--gutter) 32px; background: var(--c-surface); animation: hero-copy-in 520ms var(--ease) both; }
.kicker { font-family: var(--font-display); font-size: 1rem; color: var(--c-muted); margin-bottom: 10px; }
html[data-lang="en"] .kicker { font-style: italic; }
html:not([data-lang="en"]) .kicker { font-style: normal; }
.hero h1 { max-width: 20ch; }
.hero-subline { margin-top: 18px; max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin-top: 24px; }
.fact-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.fact-chips li { padding: 6px 12px; border-radius: var(--r-lg); background: var(--c-tint); color: var(--c-ink); font-size: .8125rem; }

/* ── Sections ── */
.section { padding-block: 64px; }
.about-section { background: var(--c-bg); }
.services-section { background: var(--c-surface); }
.gallery-section { background: var(--c-bg); }
.contact-section { background: var(--c-surface); }
.section-intro > p { margin-top: 16px; color: var(--c-muted); max-width: 48ch; }
.section-intro .services-note { font-size: .875rem; }

/* ── About ── */
.about-grid { display: grid; gap: 32px; }
.prose { margin-top: 20px; max-width: 62ch; }
.prose p + p { margin-top: 14px; }
.about-figure { margin-top: 8px; }
.about-figure img { width: 100%; height: auto; border-radius: var(--r-md); }
.image-note { margin-top: 10px; color: var(--c-muted); font-size: .75rem; }
.highlights { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.highlights > div { background: var(--c-tint); border-radius: var(--r-md); padding: 18px 16px; }
.highlights dt { color: var(--c-muted); font-size: .8rem; }
.highlights dd { margin-top: 6px; font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }

/* ── Services (images × 6) ── */
.service-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 36px; }
.service-card picture, .service-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-md); }
.service-card h3 { margin-top: 16px; font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem; }
.service-card p { margin-top: 6px; color: var(--c-muted); font-size: .9375rem; }

/* ── Gallery (masonry-3) ── */
.gallery-heading { display: grid; gap: 16px; margin-bottom: 32px; }
.gallery-heading p { max-width: 54ch; color: var(--c-muted); font-size: var(--fs-0); }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.gallery-link { display: block; position: relative; background: var(--c-tint); border-radius: var(--r-md); overflow: hidden; }
.gallery-link picture, .gallery-link img { width: 100%; aspect-ratio: var(--tile-ratio); object-fit: cover; }
.sample-badge { position: absolute; bottom: 8px; inset-inline-start: 8px; max-width: calc(100% - 16px); width: fit-content; padding: 3px 10px; border-radius: var(--r-lg); background: rgb(26 35 66 / .9); color: var(--c-bg); font-size: 11px; line-height: 1.6; pointer-events: none; }
.gallery-grid[data-masonry] { grid-auto-rows: 1px; }

/* ── Contact ── */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.contact-intro { margin-top: 18px; max-width: 46ch; color: var(--c-muted); }
.contact-social { margin-top: 12px; display: flex; gap: 18px; font-size: .875rem; }
.contact-social a { display: inline-flex; align-items: center; min-height: 44px; }
.contact-details { margin-top: 26px; }
.contact-details > div { padding-block: 10px; border-bottom: 1px solid var(--c-line); }
.contact-details dt { font-size: .875rem; color: var(--c-muted); }
.contact-details dd { margin-top: 4px; }
.contact-details a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.contact-details dd a + a { margin-inline-start: 18px; }
.hours-heading { margin-top: 26px; font-size: 1.125rem; }
.hours { margin-top: 14px; width: 100%; border-collapse: collapse; }
.hours th, .hours td { text-align: start; padding: 10px 0; border-bottom: 1px solid var(--c-line); font-weight: 400; }
.hours th { color: var(--c-muted); font-size: .9375rem; }
.hours td { white-space: nowrap; font-size: .9375rem; }
.map-column h3 { margin-bottom: 18px; font-size: 1.125rem; }
.map-card { width: 100%; aspect-ratio: 4 / 3; min-height: 280px; display: grid; background: var(--c-tint); border-radius: var(--r-md); overflow: hidden; }
.map-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 28px 24px; text-align: center; }
.map-placeholder > p { max-width: 26ch; font-size: .9rem; }
.map-pin { width: 44px; height: 44px; stroke-width: 1.5; }
.map-card iframe { width: 100%; height: 100%; min-height: 280px; border: 0; }
.maps-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; margin-top: 10px; font-size: .875rem; }

/* ── Footer and sticky CTA ── */
.site-footer { background: var(--c-bg); border-top: 1px solid var(--c-line); padding-block: 40px calc(40px + var(--sticky-cta-h)); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 26px; }
.footer-top .wordmark { font-size: 1.35rem; }
.footer-top p { margin-top: 8px; font-size: .875rem; color: var(--c-muted); }
.back-top { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; font-size: .875rem; }
.footer-bottom { padding-block: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .75rem; color: var(--c-muted); }
.preview-notice { padding-top: 16px; border-top: 1px solid var(--c-line); font-size: .75rem; color: var(--c-muted); }
.preview-notice p { max-width: 100ch; }
.offer-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; }
.sticky-cta { position: fixed; z-index: 25; inset-inline: 0; bottom: 0; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); padding-inline-start: calc(var(--stripe-w) + var(--gutter)); background: var(--c-bg); border-top: 1px solid var(--c-line); }
.sticky-cta .button { width: 100%; }

/* ── Dialogs ── */
a, button, [tabindex] { scroll-margin-block: calc(var(--header-h) + 12px) calc(var(--sticky-cta-h) + 12px); }
body:has(dialog[open]) { overflow: hidden; }
body:has(dialog[open]) .sticky-cta { visibility: hidden; }
dialog { border: 0; color: var(--c-ink); background: var(--c-surface); border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: 0; overscroll-behavior: contain; }
dialog::backdrop { background: rgb(26 35 66 / .65); }
.drawer { inset: 0 0 0 auto; width: min(100%, 420px); max-width: 100%; height: 100dvh; max-height: 100%; margin: 0; padding: 20px var(--gutter) max(24px, env(safe-area-inset-bottom)); overflow-y: auto; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.drawer-nav { display: grid; padding-block: 26px; gap: 8px; }
.drawer-nav a { display: flex; align-items: center; min-height: 48px; padding: 10px 0; border-bottom: 1px solid var(--c-line); color: var(--c-ink); text-decoration: none; }
.drawer .lang-switch { margin-bottom: 26px; }
.drawer > .button { width: 100%; }
.lightbox { width: min(1050px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); margin: auto; overflow-y: auto; }
.viewer-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 8px 16px; font-size: .75rem; }
.viewer-image { background: var(--c-tint); }
.viewer-image picture { width: 100%; }
.viewer-image img { width: 100%; height: min(54dvh, 620px); object-fit: contain; }
.viewer-bottom { padding: 16px; }
#viewer-caption { font-size: .875rem; line-height: 1.65; }
.viewer-controls { display: flex; gap: 16px; align-items: center; justify-content: flex-end; margin-top: 16px; }
.viewer-count { font-size: .875rem; font-variant-numeric: tabular-nums; }

/* ── Image failure fallback ── */
.image-unavailable { position: relative; min-height: 120px; background: var(--c-tint); }
.image-unavailable img { visibility: hidden; }
.image-unavailable::after { content: attr(data-fallback-label); position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; color: var(--c-muted); font-size: .875rem; text-align: center; }

/* ── Motion ── */
@keyframes hero-image-in { from { opacity: .94; } to { opacity: 1; } }
@keyframes hero-copy-in { from { transform: translateX(16px); } to { transform: none; } }

/* ── Breakpoints ── */
@media (max-width: 599px) {
  /* The three native switcher labels do not share a row with the wordmark on
     small screens; the switcher keeps its own full row and 44px targets. */
  .header-inner { flex-wrap: wrap; padding-block: 6px; }
  .header-inner > .lang-switch { order: 3; width: 100%; margin-inline-start: 0; justify-content: flex-start; }
  .menu-toggle { margin-inline-start: auto; }
}
@media (min-width: 600px) {
  .header-inner { gap: 20px; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .highlights { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .viewer-bottom { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; }
  .viewer-controls { margin: 0; }
}
@media (min-width: 768px) {
  :root { --header-h: 72px; }
  .header-inner { min-height: 72px; }
  .section { padding-block: 88px; }
  /* Desktop hero: full-bleed split; the stripe overlays the image's left edge. */
  .hero { display: grid; grid-template-columns: 56% minmax(0, 1fr); min-height: 78vh; margin-inline-start: calc(-1 * var(--stripe-w)); animation: none; }
  .hero-figure, .hero-figure picture, .hero-figure img { height: 100%; }
  .hero-figure img { aspect-ratio: auto; object-fit: cover; }
  .hero-copy { margin: 0; padding: calc(var(--s-12) + 8px) var(--gutter) var(--s-12) calc(var(--gutter) + var(--s-2)); display: flex; flex-direction: column; justify-content: center; background: var(--c-bg); }
  .hero h1 { max-width: 22ch; }
  .about-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
  .about-copy { grid-column: 2; grid-row: 1; }
  .about-figure { grid-column: 1; grid-row: 1; margin: 0; }
  .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
  .map-column { padding-top: 6px; }
  .footer-bottom { font-size: .8125rem; }
}
@media (min-width: 1024px) {
  :root { --sticky-cta-h: 0px; }
  .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sticky-cta { display: none; }
  .header-inner .header-cta { display: inline-flex; padding: 8px 16px; font-size: .8125rem; }
}
@media (min-width: 1200px) {
  .desktop-nav { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
  .desktop-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--c-ink); font-size: .875rem; text-decoration: none; }
  .desktop-nav a:hover { text-decoration: underline; }
  .header-inner > .lang-switch { margin-inline-start: 0; }
  .menu-toggle { display: none; }
}