/* ============================================================
   MATI BHADRA SAGARA — HOME PAGE
   css/pages/home.css

   Styles specific to index.html.
   All sections are mobile-first; min-width media queries
   layer on tablet and desktop layouts.
   No hardcoded hex values — all via design tokens.
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   HOME HERO
   ───────────────────────────────────────────────────────────── */

.home-hero {
  position: relative;
  min-height: 480px;          /* mobile */
  /* Rust gradient at 80% opacity lets the brocade image show through */
  background-image:
    linear-gradient(
      135deg,
      rgba(147, 61, 4, 0.62) 0%,
      rgba(179, 84, 30, 0.62) 100%
    ),
    url('../../assets/images/homepage-hero-image-brocade-background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;      /* content sits in lower portion */
  overflow: hidden;
}

/* Brocade texture overlay at 10% opacity */
.home-hero__texture {
  position: absolute;
  inset: 0;
  background-image: url('../../assets/images/homepage-hero-tibetan-brocade-transparent.png');
  background-size: cover;
  background-position: center;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

.home-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--space-9) var(--space-11);  /* 64px top, 96px bottom */
  width: 100%;
}

.home-hero__content {
  max-width: 44rem;
}

.home-hero__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-size-display);
  line-height: var(--type-lh-display);
  letter-spacing: var(--type-ls-display);
  color: var(--color-text-white);
  margin-block: var(--space-4) var(--space-5);
}

.home-hero__subtitle {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--type-size-body-l);
  line-height: var(--type-lh-body-l);
  color: var(--color-text-hero);
  margin-bottom: var(--space-7);
  max-width: none;            /* override base.css 72ch limit */
}

.home-hero__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Hero line breaks — only render on wider viewports */
.bp-hide { display: none; }

@media (min-width: 769px) {
  .bp-hide { display: inline; }
}

@media (min-width: 480px) {
  .home-hero__ctas {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-4);
  }
}

@media (min-width: 769px) {
  .home-hero {
    min-height: 600px;
    align-items: center;      /* vertically centre content at tablet */
  }

  .home-hero__inner {
    padding-block: var(--space-12);   /* 128px */
  }
}

@media (min-width: 1025px) {
  .home-hero {
    min-height: 921px;
  }

  .home-hero__inner {
    padding-block: var(--space-12) var(--space-13);
  }
}


/* ─────────────────────────────────────────────────────────────
   OUR STORY
   ───────────────────────────────────────────────────────────── */

.our-story {
  background-color: var(--color-bg-primary);
}

.our-story__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
}

.our-story__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.our-story__heading {
  font-size: var(--type-size-h2-xl);
  line-height: var(--type-lh-h2-xl);
  color: var(--color-brand-rust);
}

.our-story__text p {
  color: var(--color-text-body);
  font-size: var(--type-size-body-m);
  line-height: var(--type-lh-body-m);
  max-width: 52ch;
}

.our-story__media {
  position: relative;
}

.our-story__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* Red accent block — sits over the image bottom-right */
.our-story__accent {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: var(--color-cta);
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.our-story__accent-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-size-quote-m);
  line-height: var(--type-lh-quote-m);
  color: var(--color-text-white);
  max-width: none;
}

.our-story__accent-sub {
  font-family: var(--font-sans);
  font-size: var(--type-size-body-s);
  letter-spacing: var(--type-ls-eyebrow-s);
  text-transform: uppercase;
  color: rgba(255, 241, 237, 0.8);
}

@media (min-width: 769px) {
  .our-story__inner {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-9);
  }

  .our-story__image {
    aspect-ratio: auto;
    height: 100%;
    min-height: 400px;
  }
}

@media (min-width: 1025px) {
  .our-story__inner {
    /* 7+5 column split */
    grid-template-columns: 7fr 5fr;
    gap: var(--space-11);
  }
}


/* ─────────────────────────────────────────────────────────────
   LAMRIM LINEAGE — BENTO GRID
   ───────────────────────────────────────────────────────────── */

.lamrim-lineage {
  background-color: var(--color-bg-secondary);
}

.lamrim-lineage__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
}

.lamrim-lineage__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 56rem;
}

.lamrim-lineage__heading {
  font-size: var(--type-size-h2-l);
  line-height: var(--type-lh-h2-l);
  color: var(--color-brand-rust);
}

.lamrim-lineage__intro {
  font-size: var(--type-size-body-m);
  line-height: var(--type-lh-body-m);
  color: var(--color-text-body);
  max-width: 60ch;
}

/* Bento grid — mobile: 1 col */
.lamrim-lineage__bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

/* Shared bento card */
.bento-card {
  background-color: var(--color-bg-primary);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border: var(--border-card);
}

.bento-card--featured {
  background-color: var(--color-bg-tertiary);
}

.bento-card--highlight {
  background-color: var(--color-cta);
}

.bento-card__icon,
.bento-card__icon-img {
  width: 2.25rem;     /* 36px */
  height: 2.25rem;
  object-fit: contain;
  flex-shrink: 0;
}

.bento-card__icon-img {
  width: 3rem;        /* featured card gets larger icon */
  height: 3rem;
}

.bento-card__heading {
  font-family: var(--font-display);
  font-size: var(--type-size-h3);
  line-height: var(--type-lh-h3);
  color: var(--color-brand-rust);
  font-weight: 400;
}

.bento-card__body {
  font-family: var(--font-sans);
  font-size: var(--type-size-body);
  line-height: var(--type-lh-body);
  color: var(--color-text-body);
  flex: 1;
  max-width: 38ch;
}

.bento-card__cta {
  margin-top: var(--space-2);
  align-self: flex-start;
}

@media (min-width: 480px) {
  .lamrim-lineage__bento {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Featured card spans both columns */
  .bento-card--featured {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1025px) {
  .lamrim-lineage__bento {
    /* 3-col: featured takes col 1+2, remaining 4 fill 2×2 on right */
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: var(--space-5);
  }

  .bento-card--featured {
    grid-column: 1;
    grid-row: 1 / 3;     /* spans both rows */
  }

  .bento-card:nth-child(2) { grid-column: 2; grid-row: 1; }
  .bento-card:nth-child(3) { grid-column: 3; grid-row: 1; }
  .bento-card:nth-child(4) { grid-column: 2; grid-row: 2; }
  .bento-card:nth-child(5) { grid-column: 3; grid-row: 2; }
}


/* ─────────────────────────────────────────────────────────────
   JOIN OUR STUDY GROUPS
   ───────────────────────────────────────────────────────────── */

.study-groups {
  background-color: var(--color-bg-primary);
}

.study-groups__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
}

.study-groups__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  justify-content: center;
}

.study-groups__heading {
  font-size: var(--type-size-h2-l);
  line-height: var(--type-lh-h2-l);
  color: var(--color-brand-rust);
}

.study-groups__text p {
  font-size: var(--type-size-body-m);
  line-height: var(--type-lh-body-m);
  color: var(--color-text-body);
  max-width: 50ch;
}

.study-groups__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.study-groups__media {
  order: -1;            /* image appears above text on mobile */
}

.study-groups__image {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
}

@media (min-width: 480px) {
  .study-groups__ctas {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (min-width: 769px) {
  .study-groups__inner {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-9);
  }

  .study-groups__media {
    order: 0;           /* image right of text at tablet+ */
  }

  .study-groups__image {
    aspect-ratio: auto;
    height: 100%;
    min-height: 400px;
  }
}

@media (min-width: 1025px) {
  .study-groups__inner {
    /* 7+5 split — text wider */
    grid-template-columns: 7fr 5fr;
    gap: var(--space-11);
  }
}


/* ─────────────────────────────────────────────────────────────
   GALLERY PREVIEW
   ───────────────────────────────────────────────────────────── */

.gallery-preview {
  background-color: var(--color-bg-secondary);
}

.gallery-preview__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.gallery-preview__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.gallery-preview__heading {
  font-size: var(--type-size-h2-m);
  line-height: var(--type-lh-h2-m);
  color: var(--color-brand-rust);
}

/* Preview grid — 1 col mobile */
.gallery-preview__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.gallery-preview__item {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
}

.gallery-preview__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.gallery-preview__item:hover .gallery-preview__img,
.gallery-preview__item:focus-visible .gallery-preview__img {
  transform: scale(1.03);
}

.gallery-preview__overlay {
  position: absolute;
  inset: 0;
  background: var(--gradient-gallery-hover);
  opacity: 0;
  transition: opacity var(--transition-base);
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
}

.gallery-preview__item:hover .gallery-preview__overlay,
.gallery-preview__item:focus-visible .gallery-preview__overlay {
  opacity: 1;
}

/* Always show overlay on touch devices */
@media (hover: none) {
  .gallery-preview__overlay {
    opacity: 0.6;
  }
}

.gallery-preview__caption {
  font-family: var(--font-sans);
  font-size: var(--type-size-eyebrow-m);
  letter-spacing: var(--type-ls-eyebrow-m);
  text-transform: uppercase;
  color: var(--color-text-white);
  font-weight: 700;
}

.gallery-preview__footer {
  display: flex;
  justify-content: center;
}

@media (min-width: 480px) {
  .gallery-preview__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* First image takes full width */
  .gallery-preview__item:first-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 769px) {
  .gallery-preview__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .gallery-preview__item:first-child {
    grid-column: auto;        /* reset — all 3 cols equal at tablet+ */
  }
}


/* ─────────────────────────────────────────────────────────────
   FIND US
   ───────────────────────────────────────────────────────────── */

.find-us {
  background-color: var(--color-bg-tertiary);
}

.find-us__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
}

.find-us__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.find-us__heading {
  font-size: var(--type-size-h2-m);
  line-height: var(--type-lh-h2-m);
  color: var(--color-brand-rust);
}

.find-us__address {
  font-family: var(--font-display);
  font-style: normal;
  font-size: var(--type-size-body-m);
  line-height: var(--type-lh-body-m);
  color: var(--color-text-body);
}

.find-us__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.find-us__contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--type-size-body);
  color: var(--color-brand-rust);
  text-decoration: none;
  min-height: 44px;
  transition: color var(--transition-fast);
}

.find-us__contact-link:hover {
  color: var(--color-cta);
}

.find-us__contact-link--inline {
  min-height: auto;
  font-size: inherit;
}

.find-us__cta {
  align-self: flex-start;
}

.find-us__note {
  font-family: var(--font-sans);
  font-size: var(--type-size-body-s);
  color: var(--color-text-muted);
  max-width: 44ch;
}

.find-us__map-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
}

@media (min-width: 769px) {
  .find-us__inner {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: var(--space-9);
  }

  .find-us__map-img {
    aspect-ratio: auto;
    min-height: 400px;
    height: 100%;
  }
}

@media (min-width: 1025px) {
  .find-us__inner {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-11);
  }
}