:root {
  --sindoor: #9d1f16;
  --deep-red: #53100d;
  --marigold: #f0a51e;
  --turmeric: #ffd76d;
  --leaf: #166c53;
  --cream: #fff8e4;
  --paper: #ffffff;
  --ink: #2f2018;
  --muted: #725a4d;
  --line: rgba(125, 59, 21, 0.18);
  --page-a: #fff8e4;
  --page-b: #f9ebc3;
  --event-text: #fff7d2;
  --event-muted: #f9dfaa;
  --surface-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 248, 228, 0.92) 100%);
  --cream-gradient: linear-gradient(180deg, #fffdf4 0%, #fff4d0 100%);
  --gold-gradient: linear-gradient(135deg, #ffd76d 0%, #f0a51e 100%);
  --red-gradient: linear-gradient(135deg, #53100d 0%, #9d1f16 62%, #713012 100%);
  --number-font: "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body[data-theme="orange"] {
  --sindoor: #c64b15;
  --deep-red: #713012;
  --marigold: #f28c18;
  --turmeric: #ffd27a;
  --leaf: #1c725c;
  --page-a: #fff5e4;
  --page-b: #ffe4bd;
  --line: rgba(154, 67, 13, 0.2);
}

body[data-theme="green"] {
  --sindoor: #287447;
  --deep-red: #113e30;
  --marigold: #d99d28;
  --turmeric: #ffe19a;
  --leaf: #176146;
  --page-a: #f7f6e8;
  --page-b: #e0e9cf;
  --ink: #182b21;
  --muted: #526557;
  --line: rgba(26, 89, 58, 0.2);
}

body[data-theme="yellow"] {
  --sindoor: #a26b00;
  --deep-red: #5c420a;
  --marigold: #d78b08;
  --turmeric: #ffde6a;
  --leaf: #386b39;
  --page-a: #fffae3;
  --page-b: #f8e7a2;
  --ink: #382b0b;
  --muted: #716038;
  --line: rgba(140, 100, 12, 0.22);
}

* {
  box-sizing: border-box;
}

body {
  background:
    radial-gradient(circle at 14% 0%, rgba(240, 165, 30, 0.2), transparent 28%),
    radial-gradient(circle at 86% 8%, rgba(22, 108, 83, 0.13), transparent 24%),
    linear-gradient(180deg, var(--page-a) 0%, #fff3cf 44%, var(--page-b) 100%),
    url("../../../images/bgimage.png") center/360px repeat;
  color: var(--ink);
  font-family: Cambria, Georgia, serif;
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.header-contact,
.event-time,
.today-event span,
.panel-note,
.compact-list dd,
.timing-section span,
.festival-table td:first-child,
.festival-table td:nth-child(2),
.activity-card span,
.contact-grid span,
.feature-card span,
.visit-card p,
.pooja-list span,
.sponsor-form input,
.sponsor-form select,
.donation-methods p,
.sponsor-panel p,
.donation-note,
.priest-card p {
  font-family: var(--number-font);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.site-shell {
  background:
    linear-gradient(180deg, rgba(255, 248, 228, 0.96), rgba(249, 235, 195, 0.92)),
    url("../../../images/bgimage.png") center/420px repeat;
  box-shadow: 0 8px 28px rgba(83, 16, 13, 0.14);
  margin: 0 auto;
  max-width: 1240px;
  min-height: 100vh;
  padding-left: 9px;
  padding-right: 9px;
  position: relative;
}

.site-shell:before,
.site-shell:after {
  bottom: 0;
  content: "";
  position: absolute;
  top: 0;
  width: 9px;
  z-index: 8;
}

.site-shell:before {
  background: linear-gradient(90deg, #5b2012 0%, #a84618 25%, #eda23b 53%, #ffe19a 68%, #8d3516 100%);
  left: 0;
}

.site-shell:after {
  background: linear-gradient(90deg, #8d3516 0%, #ffe19a 32%, #eda23b 47%, #a84618 75%, #5b2012 100%);
  right: 0;
}

.temple-header {
  background:
    radial-gradient(circle at 48% 0%, rgba(255, 215, 109, 0.16), transparent 36%),
    linear-gradient(135deg, #3d0b09 0%, var(--deep-red) 42%, var(--sindoor) 100%);
  border-bottom: 0;
  color: var(--cream);
  display: flex;
  flex-direction: column;
  padding: 20px 22px 0;
  position: sticky;
  box-shadow: 0 5px 16px rgba(45, 14, 8, 0.24);
  top: 0;
  z-index: 5;
}

.temple-header:after {
  background: linear-gradient(180deg, #5b2012 0%, #a84618 25%, #eda23b 53%, #ffe19a 68%, #8d3516 100%);
  content: "";
  display: block;
  height: 9px;
  margin-left: -22px;
  margin-right: -22px;
  width: calc(100% + 44px);
}

.header-main {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  flex: 1;
  min-height: 82px;
  padding-bottom: 18px;
  width: 100%;
}

.brand {
  align-items: center;
  display: flex;
  flex: 1 1 330px;
  gap: 12px;
  text-decoration: none;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  color: var(--turmeric);
  font-size: 24px;
}

.brand small {
  color: #f8dfaa;
  font-size: 14px;
}

.header-deity-strip {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(255, 248, 228, 0.1), rgba(255, 215, 109, 0.16), rgba(255, 248, 228, 0.1));
  border: 1px solid rgba(255, 215, 109, 0.28);
  border-radius: 8px;
  display: flex;
  flex: 0 1 auto;
  gap: 7px;
  justify-content: center;
  min-width: 0;
  padding: 8px;
}

.header-deity-strip img {
  background: var(--cream);
  border: 2px solid rgba(255, 215, 109, 0.45);
  border-radius: 50%;
  height: 54px;
  object-fit: cover;
  width: 54px;
}

.header-contact {
  color: #f8dfaa;
  flex: 1 1 280px;
  font-size: 14px;
  line-height: 1.45;
  text-align: right;
}

.header-contact > span {
  display: block;
  margin-bottom: 4px;
}

.header-contact a {
  border-left: 1px solid rgba(255, 215, 109, 0.48);
  color: var(--turmeric);
  font-weight: 700;
  margin-left: 10px;
  padding-left: 10px;
  text-decoration: none;
}

.header-contact a:first-child {
  border-left: 0;
}

.carousel-heading,
.panel h2,
.page-header,
.subheading,
.section-heading,
.activity-card h2,
.service-grid h2,
.info-list h2,
.story-sections h2,
.feature-banner h2,
.contact-feature h2,
.priest-card h2,
.gallery-grid h2,
.donation-methods h2,
.sponsor-panel h2,
.feature-card h3,
.visit-card h3,
.event-grid h3,
.seva-grid h3,
.special-date-card h3,
.image-panel h2 {
  text-align: center;
}

.top-nav {
  border-top: 1px solid rgba(255, 215, 109, 0.28);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  padding: 7px 0;
  width: 100%;
}

.top-nav a {
  border-radius: 5px;
  color: #ffe9ac;
  font-size: 15px;
  font-weight: 700;
  padding: 9px 9px;
  text-decoration: none;
  white-space: nowrap;
}

.top-nav a:hover {
  background: rgba(240, 165, 30, 0.24);
}

.top-nav .active-page {
  background: var(--gold-gradient);
  color: var(--deep-red);
}

.event-showcase {
  background: var(--deep-red);
  border-bottom: 5px solid var(--marigold);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.event-carousel {
  background:
    radial-gradient(circle at top left, rgba(255, 215, 109, 0.14), transparent 38%),
    linear-gradient(135deg, var(--deep-red), var(--sindoor));
  color: var(--event-text);
  overflow: hidden;
  padding-top: 12px;
  position: relative;
}

.carousel-heading {
  padding: 0 64px 8px 18px;
}

.carousel-heading h2 {
  color: var(--turmeric);
  font-size: 20px;
  margin: 0;
}

.carousel-viewport {
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 420ms ease;
}

.event-slide {
  align-items: center;
  display: grid;
  flex: 0 0 100%;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: 138px;
  min-height: 138px;
  padding: 0 18px 14px;
}

.event-mini-card {
  align-items: center;
  background: rgba(255, 248, 228, 0.1);
  border: 1px solid rgba(255, 215, 109, 0.25);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: 76px 1fr;
  min-width: 0;
  padding: 10px;
}

.event-mini-card h1 {
  color: var(--event-text);
  font-size: 16px;
  line-height: 1.04;
  margin: 0;
}

.event-mini-card p {
  color: var(--event-muted);
  font-size: 13px;
  line-height: 1.42;
  margin: 0;
}

.event-time {
  align-items: center;
  color: #ffffff;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.event-time strong {
  background: var(--leaf);
  border-radius: 5px;
  font-size: 12px;
  padding: 6px 9px;
}

.event-time span {
  background: rgba(255, 215, 109, 0.14);
  border: 1px solid rgba(255, 215, 109, 0.32);
  border-radius: 5px;
  color: var(--turmeric);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 8px;
}

.event-mini-card img {
  border: 2px solid rgba(255, 215, 109, 0.36);
  border-radius: 6px;
  height: 76px;
  object-fit: cover;
  width: 76px;
}

.carousel-controls {
  align-items: center;
  bottom: 0;
  display: block;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
}

.carousel-arrow,
.carousel-dot {
  border: 0;
  cursor: pointer;
}

.carousel-arrow {
  background: rgba(255, 248, 228, 0.62);
  border-radius: 50%;
  color: var(--deep-red);
  font-size: 18px;
  font-weight: 700;
  height: 32px;
  line-height: 1;
  pointer-events: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  z-index: 2;
}

.carousel-arrow:hover,
.carousel-arrow:focus {
  background: rgba(255, 248, 228, 0.86);
}

.carousel-arrow[data-carousel-previous] {
  left: 10px;
}

.carousel-arrow[data-carousel-next] {
  right: 10px;
}

.carousel-dots {
  bottom: 10px;
  display: flex;
  gap: 7px;
  flex-wrap: nowrap;
  justify-content: center;
  left: 50%;
  pointer-events: auto;
  position: absolute;
  transform: translateX(-50%);
}

.carousel-dot {
  background: rgba(255, 248, 228, 0.55);
  border-radius: 50%;
  height: 9px;
  padding: 0;
  width: 9px;
}

.carousel-dot.active {
  background: var(--marigold);
}

.tabs {
  display: flex;
  gap: 10px;
}

.button {
  border-radius: 5px;
  display: inline-block;
  font-weight: 700;
  padding: 12px 16px;
  text-decoration: none;
}

.button.primary {
  background: linear-gradient(135deg, var(--leaf) 0%, #1f8a68 100%);
  color: #fff;
}

.button.secondary {
  background: var(--gold-gradient);
  color: var(--deep-red);
}

.dashboard {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: 230px minmax(0, 1fr) 250px;
  padding: 18px;
}

.panel,
.center-stage,
.tab-panel article,
.feature-card,
.visit-card {
  background: var(--surface-gradient);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 28px rgba(80, 32, 12, 0.1);
}

.left-rail,
.right-rail {
  display: grid;
  gap: 14px;
}

.panel {
  overflow: hidden;
  padding: 16px;
}

.panel h2 {
  color: var(--sindoor);
  font-size: 22px;
  margin: 0 0 12px;
}

.left-rail .panel h2 {
  font-size: 22px;
}

.hours-panel h2 {
  text-align: left;
}

.panel-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
  margin: -4px 0 14px;
}

.compact-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.compact-list div {
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.compact-list dt {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
}

.compact-list dd {
  margin: 3px 0 0;
}

.accent-panel {
  background:
    radial-gradient(circle at top right, rgba(255, 215, 109, 0.15), transparent 36%),
    var(--red-gradient);
  color: var(--event-muted);
}

.accent-panel h2 {
  color: var(--turmeric);
}

.accent-panel h2 span {
  color: var(--event-text);
  display: block;
  font-size: 13px;
  margin-top: 3px;
}

.today-events-list {
  display: grid;
  gap: 9px;
}

.today-event {
  background: rgba(255, 248, 228, 0.1);
  border: 1px solid rgba(255, 215, 109, 0.22);
  border-radius: 6px;
  padding: 9px;
}

.today-event strong,
.today-event span {
  display: block;
}

.today-event strong {
  color: var(--event-text);
  font-size: 15px;
  line-height: 1.2;
}

.today-event span {
  color: var(--turmeric);
  font-size: 13px;
  font-weight: 700;
  margin-top: 4px;
}

.timing-section {
  border-bottom: 1px solid var(--line);
  padding: 0 0 12px;
  margin-bottom: 12px;
}

.timing-section:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.timing-section strong,
.timing-section span {
  display: block;
}

.timing-section strong {
  color: var(--sindoor);
  margin-bottom: 5px;
}

.timing-section span {
  line-height: 1.45;
}

.center-stage {
  overflow: hidden;
}

.page-stage {
  padding: 22px;
}

.page-header {
  background:
    linear-gradient(90deg, rgba(255, 215, 109, 0.16), rgba(255, 248, 228, 0.42), rgba(22, 108, 83, 0.08));
  border-bottom: 2px solid var(--line);
  border-radius: 7px;
  margin-bottom: 18px;
  padding: 14px;
}

.page-header > p:first-child {
  color: var(--leaf);
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 5px;
  text-transform: uppercase;
}

.page-header h1 {
  color: var(--sindoor);
  font-size: 32px;
  line-height: 1.15;
  margin: 0 0 8px;
}

.page-intro {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
  margin: 0;
}

.subheading {
  background: linear-gradient(90deg, rgba(240, 165, 30, 0.16), rgba(255, 248, 228, 0));
  border-bottom: 2px solid var(--line);
  border-radius: 6px;
  color: var(--sindoor);
  font-size: 23px;
  margin: 24px 0 14px;
  padding: 9px 11px;
}

.month-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.month-filter button,
.content-toggle-button {
  background: var(--cream-gradient);
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--sindoor);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 8px 11px;
}

.month-filter button.active,
.content-toggle-button.active {
  background: var(--red-gradient);
  color: #ffffff;
}

.festival-table-wrap {
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
}

.festival-table {
  border-collapse: collapse;
  font-size: 15px;
  width: 100%;
}

.festival-table th {
  background: var(--red-gradient);
  color: var(--turmeric);
  font-size: 14px;
  text-align: left;
  text-transform: uppercase;
}

.festival-table th,
.festival-table td {
  border-bottom: 1px solid var(--line);
  line-height: 1.4;
  padding: 11px 12px;
  vertical-align: top;
}

.festival-table td:first-child {
  color: var(--sindoor);
  font-weight: 700;
  white-space: nowrap;
}

.festival-table td:nth-child(2) {
  color: var(--leaf);
  font-weight: 700;
  white-space: nowrap;
}

.festival-table tr:nth-child(odd) td {
  background: var(--cream);
}

.festival-table tbody tr:last-child td {
  border-bottom: 0;
}

.content-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.activity-panel {
  display: none;
}

.activity-panel.active {
  display: block;
}

.activity-list,
.service-grid,
.info-list,
.priests-grid,
.gallery-grid,
.contact-grid,
.story-sections {
  display: grid;
  gap: 12px;
}

.activity-card {
  align-items: center;
  background: var(--cream-gradient);
  border: 1px solid var(--line);
  border-radius: 7px;
  display: grid;
  gap: 14px;
  grid-template-columns: 82px 1fr;
  padding: 12px;
}

.activity-card img {
  border-radius: 6px;
  height: 82px;
  object-fit: cover;
  width: 82px;
}

.activity-card h2 {
  color: var(--sindoor);
  font-size: 18px;
  margin: 0 0 6px;
}

.activity-card span {
  color: var(--leaf);
  font-weight: 700;
}

.service-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-grid article,
.info-list article,
.story-sections section {
  background: var(--cream-gradient);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 15px;
}

.service-grid h2,
.info-list h2,
.story-sections h2 {
  color: var(--sindoor);
  font-size: 20px;
  margin: 0 0 8px;
}

.service-grid p,
.info-list p,
.story-sections p {
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.feature-banner,
.contact-feature {
  background: var(--cream-gradient);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 16px;
  grid-template-columns: 190px 1fr;
  margin-bottom: 16px;
  overflow: hidden;
  padding: 12px;
}

.feature-banner img {
  border-radius: 6px;
  height: 145px;
  object-fit: cover;
  width: 190px;
}

.feature-banner h2,
.contact-feature h2 {
  color: var(--sindoor);
  font-size: 23px;
  margin: 5px 0 8px;
}

.feature-banner p,
.contact-feature p {
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 12px;
}

.priests-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.priest-card {
  background: var(--cream-gradient);
  border: 1px solid var(--line);
  border-radius: 7px;
  display: grid;
  gap: 10px;
  grid-template-columns: 92px minmax(0, 1fr);
  overflow: hidden;
  padding: 10px;
}

.priest-card.featured {
  border-color: var(--marigold);
  grid-column: span 2;
}

.priest-card img {
  border-radius: 5px;
  height: 100px;
  object-fit: cover;
  width: 92px;
}

.priest-card small {
  color: var(--leaf);
  font-weight: 700;
  text-transform: uppercase;
}

.priest-card h2 {
  color: var(--sindoor);
  font-size: 16px;
  margin: 4px 0 7px;
  overflow-wrap: anywhere;
}

.priest-card p {
  color: var(--muted);
  font-size: 14px;
  margin: 2px 0;
  overflow-wrap: anywhere;
}

.gallery-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gallery-archive {
  display: grid;
  gap: 26px;
}

.gallery-year > h2 {
  border-bottom: 2px solid var(--marigold);
  color: var(--sindoor);
  font-size: 24px;
  margin: 0 0 14px;
  padding-bottom: 7px;
  text-align: left;
}

.gallery-grid article {
  background: var(--cream-gradient);
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
}

.gallery-card-link {
  color: inherit;
  display: block;
  height: 100%;
  text-decoration: none;
}

.gallery-card-link:focus-visible {
  outline: 3px solid var(--leaf);
  outline-offset: -3px;
}

.gallery-card-link:hover img {
  transform: scale(1.025);
}

.gallery-grid img {
  display: block;
  height: 145px;
  object-fit: cover;
  object-position: top center;
  transition: transform 160ms ease;
  width: 100%;
}

.gallery-card-copy {
  display: grid;
  gap: 5px;
  padding: 12px;
}

.gallery-card-copy strong {
  color: var(--sindoor);
  font-size: 19px;
}

.gallery-card-copy small {
  color: var(--leaf);
  font-size: 14px;
  font-weight: 700;
}

.album-header .text-link {
  margin-top: 8px;
}

.album-photo-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.album-photo-grid a {
  background: var(--cream-gradient);
  border: 1px solid var(--line);
  border-radius: 7px;
  display: block;
  min-width: 0;
  overflow: hidden;
}

.album-photo-grid a:focus-visible {
  outline: 3px solid var(--leaf);
  outline-offset: 2px;
}

.album-photo-grid img {
  display: block;
  height: 210px;
  object-fit: cover;
  object-position: top center;
  transition: transform 160ms ease;
  width: 100%;
}

.album-photo-grid a:hover img {
  transform: scale(1.025);
}

.album-link-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.album-link-grid a {
  background: var(--cream-gradient);
  border: 1px solid var(--line);
  border-radius: 7px;
  display: grid;
  gap: 6px;
  padding: 16px;
  text-decoration: none;
}

.album-link-grid a:hover,
.album-link-grid a:focus-visible {
  border-color: var(--marigold);
}

.album-link-grid strong {
  color: var(--sindoor);
  font-size: 18px;
}

.album-link-grid span {
  color: var(--leaf);
  font-weight: 700;
}

.album-empty {
  text-align: center;
}

.album-empty p {
  color: var(--muted);
  margin: 0;
}

.contact-feature {
  grid-template-columns: 1fr;
}

.contact-feature img {
  border-radius: 6px;
  height: 210px;
  object-fit: cover;
  width: 220px;
}

.contact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-grid article {
  background: var(--cream-gradient);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
}

.contact-grid strong,
.contact-grid span {
  display: block;
}

.contact-grid strong {
  color: var(--sindoor);
  margin-bottom: 6px;
}

.contact-grid span {
  line-height: 1.45;
}

.page-wide-image {
  border-radius: 7px;
  height: 210px;
  margin-bottom: 16px;
  object-fit: cover;
  width: 100%;
}

.story-sections {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tax-banner {
  background:
    radial-gradient(circle at top right, rgba(255, 215, 109, 0.15), transparent 38%),
    var(--red-gradient);
  border-radius: 6px;
  color: var(--event-muted);
  font-size: 16px;
  margin-bottom: 16px;
  padding: 12px 15px;
}

.tax-banner strong {
  color: var(--turmeric);
}

.donation-methods {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.donation-methods article,
.sponsor-panel,
.donation-note {
  background: var(--cream-gradient);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 15px;
}

.donation-methods h2,
.sponsor-panel h2 {
  color: var(--sindoor);
  font-size: 20px;
  margin: 0 0 9px;
}

.donation-methods p,
.sponsor-panel > p,
.donation-note {
  color: var(--muted);
  line-height: 1.48;
  margin-top: 0;
}

.donation-button {
  border: 0;
  cursor: pointer;
  font: inherit;
}

.sponsor-panel {
  margin-top: 16px;
}

.sponsor-form {
  align-items: center;
  display: grid;
  gap: 10px 12px;
  grid-template-columns: 116px minmax(0, 1fr);
}

.sponsor-form label {
  color: var(--sindoor);
  font-weight: 700;
}

.sponsor-form input,
.sponsor-form select,
.sponsor-form textarea {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink);
  font: inherit;
  min-height: 40px;
  padding: 8px 10px;
  width: 100%;
}

.sponsor-form textarea {
  min-height: 74px;
  resize: vertical;
}

.sponsor-submit {
  border: 0;
  cursor: pointer;
  font: inherit;
  grid-column: 2;
  justify-self: start;
}

.donation-note {
  margin-top: 16px;
}

.tabs {
  background:
    radial-gradient(circle at center top, rgba(255, 215, 109, 0.14), transparent 42%),
    var(--red-gradient);
  padding: 10px;
}

.tab {
  background: linear-gradient(180deg, #fff0bd 0%, #ffe1a0 100%);
  border: 1px solid rgba(255, 215, 109, 0.8);
  border-radius: 5px;
  color: var(--deep-red);
  cursor: pointer;
  flex: 1;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  min-height: 44px;
  overflow-wrap: anywhere;
  padding: 8px 10px;
}

.tab.active,
.tab:hover {
  background: var(--gold-gradient);
  color: #fff;
}

.multi-line-tab span {
  display: block;
}

.tab-panel {
  display: none;
  padding: 22px;
}

.tab-panel.active {
  display: block;
}

.section-heading p {
  color: var(--leaf);
  font-weight: 700;
  margin: 0 0 4px;
  text-transform: uppercase;
}

.section-heading h2 {
  color: var(--sindoor);
  font-size: 30px;
  margin: 0 0 16px;
}

.feature-card,
.visit-card {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: 180px 1fr;
  margin-bottom: 16px;
  overflow: hidden;
  padding: 14px;
}

.feature-card img,
.visit-card img {
  border-radius: 6px;
  height: 170px;
  object-fit: cover;
  object-position: top center;
  width: 100%;
}

.feature-card h3,
.visit-card h3,
.event-grid h3,
.seva-grid h3 {
  color: var(--deep-red);
  font-size: 23px;
  margin: 0 0 8px;
}

.feature-card p,
.visit-card p,
.event-grid p,
.seva-grid p {
  color: var(--muted);
  line-height: 1.45;
  margin: 0 0 12px;
}

.feature-card span,
.event-grid span {
  color: var(--leaf);
  display: block;
  font-weight: 700;
  margin: 0 0 10px;
}

.event-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

.seva-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}

.event-grid article,
.seva-grid article {
  background: var(--cream-gradient);
  overflow: hidden;
}

.event-grid article {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: 180px 1fr;
  padding: 14px;
}

.event-grid img {
  border-radius: 6px;
  height: 170px;
  object-fit: cover;
  object-position: top center;
  width: 100%;
}

.event-grid h3,
.event-grid p,
.event-grid span {
  padding-left: 0;
  padding-right: 0;
}

.seva-grid h3,
.seva-grid p {
  padding-left: 14px;
  padding-right: 14px;
}

.event-grid span {
  padding-bottom: 0;
}

.event-schedule {
  border-collapse: collapse;
  color: var(--muted);
  font-family: var(--number-font);
  font-size: 15px;
  margin: 0 0 12px;
  width: 100%;
}

.event-schedule td {
  border-bottom: 1px solid rgba(137, 66, 19, 0.16);
  font-weight: 700;
  padding: 6px 10px 6px 0;
  vertical-align: top;
}

.event-schedule td:nth-child(1),
.event-schedule td:nth-child(2) {
  color: var(--leaf);
  font-weight: 700;
  white-space: nowrap;
}

.event-schedule tr:last-child td {
  border-bottom: 0;
}

.seva-grid h3 {
  padding-top: 14px;
}

.pooja-list {
  display: grid;
  gap: 12px;
}

.special-dates-list {
  display: grid;
  gap: 12px;
}

.special-date-card {
  align-items: center;
  background: var(--cream-gradient);
  border: 1px solid var(--line);
  border-radius: 7px;
  display: grid;
  gap: 14px;
  grid-template-columns: 82px 1fr;
  padding: 12px;
}

.special-date-card img {
  border-radius: 6px;
  height: 82px;
  object-fit: cover;
  width: 82px;
}

.special-date-card h3 {
  color: var(--sindoor);
  font-size: 18px;
  margin: 0 0 8px;
}

.special-date-card ul {
  display: grid;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.special-date-card li {
  color: var(--muted);
  font-family: var(--number-font);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  line-height: 1.35;
}

.special-date-card time {
  color: var(--leaf);
  font-weight: 700;
}

.pooja-list article {
  align-items: center;
  background: var(--cream-gradient);
  display: grid;
  gap: 14px;
  grid-template-columns: 76px 1fr;
  padding: 12px;
}

.pooja-list img {
  border-radius: 6px;
  height: 76px;
  object-fit: cover;
  width: 76px;
}

.pooja-list strong,
.pooja-list span {
  display: block;
}

.pooja-list strong {
  color: var(--sindoor);
  font-size: 20px;
}

.pooja-list span {
  color: var(--muted);
  margin-top: 3px;
}

.image-panel {
  padding: 16px;
}

.subscription-panel p {
  color: var(--muted);
  line-height: 1.42;
  margin: 0 0 12px;
}

.subscription-panel .button {
  line-height: 1.2;
  text-align: center;
  width: 100%;
}

.image-panel h2,
.image-panel p,
.image-panel .text-link {
  margin-left: 0;
  margin-right: 0;
}

.text-link {
  color: var(--leaf);
  display: inline-block;
  font-weight: 700;
  margin-bottom: 16px;
}

@media (max-width: 980px) {
  .temple-header {
    position: relative;
    top: auto;
  }

  .dashboard {
    display: block;
  }

  .header-main {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .header-contact {
    text-align: left;
  }

  .header-deity-strip {
    flex-wrap: wrap;
    justify-content: flex-start;
    max-width: 100%;
  }

  .top-nav {
    flex-wrap: wrap;
  }

  .left-rail,
  .right-rail,
  .center-stage {
    margin-bottom: 18px;
  }

  .feature-card,
  .visit-card,
  .event-grid,
  .seva-grid,
  .service-grid,
  .priests-grid,
  .gallery-grid,
  .contact-grid,
  .story-sections,
  .donation-methods {
    grid-template-columns: 1fr;
  }

  .event-grid article {
    grid-template-columns: 1fr;
  }

  .album-photo-grid,
  .album-link-grid {
    grid-template-columns: 1fr;
  }

  .priest-card.featured {
    grid-column: auto;
  }

  .event-showcase {
    grid-template-columns: 1fr;
  }

  .event-slide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: 138px;
    min-height: 138px;
    padding: 0 18px 14px;
  }

  .event-mini-card {
    grid-template-columns: 76px 1fr;
  }

  .event-mini-card img {
    height: 76px;
    width: 76px;
  }

}

@media (max-width: 620px) {
  .site-shell {
    padding-left: 5px;
    padding-right: 5px;
  }

  .temple-header {
    padding: 14px 14px 0;
  }

  .temple-header:after {
    margin-left: -14px;
    margin-right: -14px;
    width: calc(100% + 28px);
  }

  .header-main {
    min-height: 0;
    padding-bottom: 12px;
  }

  .brand {
    flex-basis: auto;
  }

  .brand strong {
    font-size: 25px;
  }

  .header-deity-strip {
    gap: 5px;
    padding: 6px;
  }

  .site-shell:before,
  .site-shell:after {
    width: 5px;
  }

  .header-deity-strip img {
    height: 40px;
    width: 40px;
  }

  .top-nav {
    gap: 3px;
    padding: 5px 0;
  }

  .top-nav a {
    font-size: 13px;
    padding: 7px 6px;
  }

  .tabs {
    flex-wrap: wrap;
  }

  .tab {
    flex-basis: calc(50% - 5px);
  }

  .event-slide {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    padding: 0 14px 14px;
  }

  .event-mini-card h1 {
    font-size: 16px;
  }

  .page-stage {
    padding: 14px;
  }

  .feature-banner,
  .contact-feature {
    grid-template-columns: 1fr;
  }

  .sponsor-form {
    grid-template-columns: 1fr;
  }

  .sponsor-submit {
    grid-column: auto;
  }

  .feature-banner img,
  .contact-feature img {
    height: 175px;
    width: 100%;
  }
}