/* ==========================================================================
   Ananta Designs - page compositions

   Home sections, Academy, Studio, editorial pages and the promotional popup.
   Component-level rules live in components.css; this file is about how those
   components are arranged on a given page.
   ========================================================================== */

/* ---- generic editorial page ---------------------------------------------- */

.entry-content > * + * {
  margin-top: 1.25rem;
}

.entry-content h2 {
  margin-top: 2.5rem;
  font-size: clamp(1.5rem, 1.28rem + 0.95vw, 2.25rem);
}

.entry-content h3 {
  margin-top: 2rem;
  font-size: 1.35rem;
}

.entry-content p,
.entry-content li {
  color: var(--fg-dim);
  line-height: 1.7;
}

.entry-content a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.25rem;
}

.entry-content ul {
  list-style: none;
}

/* A gold lozenge instead of a bullet - the same mark the product details
   list uses, so a policy page and a product page read as one house. */
.entry-content ul > li {
  position: relative;
  padding-left: 1rem;
}

.entry-content ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--gold);
}

.entry-content ol {
  list-style: decimal;
}

.entry-content blockquote {
  border-left: 2px solid rgba(195, 161, 106, 0.5);
  padding-left: 1rem;
  color: var(--fg-dim);
  font-style: italic;
}

/* The measure a policy or story page is read at. Long-form prose gets a
   narrower column than the storefront grid. */
.prose {
  max-width: 68ch;
}

/* ---- page header --------------------------------------------------------- */

.page-head {
  padding-top: calc(var(--head-h) + 2rem);
  padding-bottom: 2.5rem;
}

.page-head__title {
  margin-top: 1rem;
}

.page-head__lede {
  margin-top: 1.5rem;
  max-width: 34rem;
}

/* ---- journal / post grid -------------------------------------------------- */

.post-grid {
  display: grid;
  gap: 0.75rem;
}

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

.post-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.post-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.25rem;
}

.post-card__title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--fg);
  transition: color 0.3s var(--ease-soft);
}

.post-card__link:hover .post-card__title {
  color: var(--gold);
}

.post-card__excerpt {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---- footer brand column -------------------------------------------------- */

.footer-brand__blurb {
  margin-top: 1rem;
  max-width: 20rem;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.footer-brand__contact {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 1.25rem;
  font-size: 13px;
  font-style: normal;
  color: var(--fg-dim);
}

.footer-brand__contact a {
  transition: color 0.3s var(--ease-soft);
}

.footer-brand__contact a:hover {
  color: var(--gold);
}

.footer-brand__address {
  color: var(--muted);
  line-height: 1.6;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.footer-legal a {
  font-size: 12px;
  color: var(--muted);
  transition: color 0.3s var(--ease-soft);
}

.footer-legal a:hover {
  color: var(--gold);
}

/* ---- studio -------------------------------------------------------------- */

.studio-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

@media (min-width: 1024px) {
  .studio-grid--wide {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

.studio-grid--tall {
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 1024px) {
  .studio-grid--tall {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

.studio-frame figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.625rem;
}

.studio-frame__caption {
  font-size: 12px;
  color: var(--fg-dim);
}

/* The "awaiting shoot" marker beside a frame with no photograph. Says plainly
   what it is rather than letting an empty plate look like a broken image. */
.studio-frame__pending {
  flex-shrink: 0;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- numbered reason grid ------------------------------------------------
   Used by both "Why train here" (Academy) and "What happens here" (Studio).
   A one-pixel gap over a line-coloured ground gives hairline rules between
   cells without a border on each. */

.reason-grid {
  display: grid;
  gap: 1px;
  margin-top: 2rem;
  border: 1px solid var(--line);
  background: var(--line);
}

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

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

.reason {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
  background: var(--ink);
}

.reason__num {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.reason__title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.35;
  color: var(--fg);
}

.reason__body {
  margin-top: 0.625rem;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

/* ---- academy programmes --------------------------------------------------- */

.programme-grid {
  display: grid;
  gap: 0.75rem;
  margin-top: 2rem;
}

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

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

.programme {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
}

.programme__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.programme__code {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.programme__level {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.programme__title {
  margin-top: 0.875rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 300;
  line-height: 1.25;
  color: var(--fg);
}

.programme__summary {
  margin-top: 0.75rem;
  flex: 1;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

/* Duration and fee, as a definition list rather than two loose lines: they
   are labelled facts about the course, and the label is what makes a bare
   "13 weeks" and a bare "₹2,65,000" legible next to each other. */
.programme__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
  margin: auto 0 0;
  padding-top: 1rem;
}

.programme__fact dt {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.programme__fact dd {
  margin: 0.25rem 0 0;
  font-size: 15px;
  color: var(--fg);
}

/* The top programme is quoted twice, with and without a kit. The second
   figure sits under the first rather than beside it - on a phone the two
   would otherwise run together into one unreadable number. */
.programme__fee-note {
  display: block;
  margin-top: 0.125rem;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* The state a discipline renders in when it has no programmes attached.
   NOT an error and NOT an empty list - an invitation to ask. */
.discipline-enquiry {
  border: 1px dashed var(--line-strong);
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.discipline-enquiry p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg-dim);
}

/* ---- contact / visit panel ------------------------------------------------ */

.visit-panel {
  border: 1px solid rgba(195, 161, 106, 0.35);
  padding: 1.75rem;
}

@media (min-width: 768px) {
  .visit-panel {
    padding: 3rem;
  }
}

.visit-panel__actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .visit-panel__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ---- the promotional popup ------------------------------------------------
   Ships hidden and renders nothing at all unless a human has filled in real
   copy AND ticked enabled. See mu-plugins/ananta-core/promotion.php. */

.promo {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: rgba(0, 0, 0, 0.6);
}

.promo[hidden] {
  display: none;
}

.promo__panel {
  position: relative;
  width: 100%;
  max-width: 32rem;
  padding: 2rem;
  border: 1px solid rgba(195, 161, 106, 0.35);
  background: var(--surface);
}

.promo__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 20px;
  color: var(--fg-dim);
  transition: color 0.3s var(--ease-soft);
}

.promo__close:hover {
  color: var(--gold);
}

.promo__title {
  margin-top: 1rem;
}

.promo__body {
  margin-top: 1rem;
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg-dim);
}

.promo__cta {
  margin-top: 1.75rem;
}

/* ---- pagination ----------------------------------------------------------- */

.pagination {
  margin-top: 3rem;
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: 0.75rem;
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
  transition:
    border-color 0.3s var(--ease-soft),
    color 0.3s var(--ease-soft);
}

.pagination .page-numbers:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.pagination .page-numbers.current {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--ink);
}

/* ---- icon sizing ---------------------------------------------------------- */

.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.icon--sm {
  width: 14px;
  height: 14px;
}

.icon--lg {
  width: 24px;
  height: 24px;
}

/* ---- plate image fill ----------------------------------------------------- */

.plate__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- academy video grid --------------------------------------------------
   The client's own studio footage. Vertical 9:16 phone video, so the frame
   follows the source rather than cropping a bride's head off to fit a
   landscape box. */

.video-grid {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .video-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
}

.video-card {
  overflow: hidden;
}

.video-card__frame {
  position: relative;
  overflow: hidden;
}

.video-card__player {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: var(--ink);
  object-fit: cover;
}

/* The theme's own controls, replacing the browser's grey bar.

   They sit over a gradient rather than a solid bar, because the frame behind
   them is moving and a hard edge across it reads as damage. At rest they are
   dimmed; pointer hover, keyboard focus and a paused clip all bring them to
   full strength, so a stopped video always shows how to start it again. */
.video-card__chrome {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 2.5rem 0.5rem 0.5rem;
  background: linear-gradient(to top, rgba(8, 8, 10, 0.75), transparent);
  opacity: 0.65;
  transition: opacity 0.3s var(--ease-soft);
}

.video-card:hover .video-card__chrome,
.video-card:focus-within .video-card__chrome,
.video-card.is-paused .video-card__chrome {
  opacity: 1;
}

.video-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(237, 232, 224, 0.22);
  border-radius: 50%;
  background: rgba(8, 8, 10, 0.55);
  color: var(--fg);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition:
    border-color 0.3s var(--ease-soft),
    color 0.3s var(--ease-soft);
}

.video-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.video-btn svg {
  width: 15px;
  height: 15px;
}

/* One button, two glyphs: which one shows is driven by the card's state, so
   the button never has to be rebuilt and the label stays put. */
.video-btn__pause,
.video-btn__unmuted {
  display: none;
}

.video-card.is-playing .video-btn__play,
.video-card.is-unmuted .video-btn__muted {
  display: none;
}

.video-card.is-playing .video-btn__pause,
.video-card.is-unmuted .video-btn__unmuted {
  display: block;
}

.video-card.is-unmuted .video-btn[data-video-sound] {
  border-color: var(--gold);
  color: var(--gold);
}

/* Nothing can drive those states without JavaScript, so the chrome stays out
   of the way until `html.js` says otherwise. A visitor without it keeps the
   browser's own controls, which the markup ships and theme.js removes. */
.video-card__chrome {
  display: none;
}

.js .video-card__chrome {
  display: flex;
}

.video-card__caption {
  padding: 0.75rem 0.875rem;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-dim);
}

/* ---- policy cross-links --------------------------------------------------
   A policy page is rarely read alone - someone checking returns usually wants
   shipping next. */

.policy-nav {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

.policy-nav ul {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
}

@media (min-width: 640px) {
  .policy-nav ul {
    grid-template-columns: repeat(3, 1fr);
  }
}

.policy-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 48px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--fg-dim);
  transition: border-color .3s var(--ease-soft), color .3s var(--ease-soft);
}

.policy-nav a:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* Marks a section whose wording the client has not approved yet. Loud on
   purpose - this must never be mistaken for finished copy, and it must be
   impossible to miss during review. */
.entry-content p:has(strong:first-child) strong:first-child {
  color: var(--gold);
}

/* ---- footer lockup -------------------------------------------------------
   The full mark - monogram, wordmark, rule and "DESIGNS" - shown where there
   is room for it to be read. */

.footer-logo {
  display: block;
  width: auto;
  height: 96px;
}

@media (min-width: 768px) {
  .footer-logo {
    height: 112px;
  }
}

/* ---- footer rights notice ------------------------------------------------ */

.footer-rights {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  max-width: 62rem;
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
}

/* The bottom bar already has a top border; with the rights notice above it
   that would read as a double rule. */
.footer-rights + .footer-bottom {
  margin-top: 1.5rem;
  padding-top: 0;
  border-top: 0;
}

/* ---- academy: why train here, and where it leads -------------------------
   Both lists come from the academy's own poster. They are short label
   phrases, not prose, so they are set as a compact grid rather than given the
   editorial measure. */

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .pillar-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.pillar {
  display: flex;
  align-items: center;
  padding: 1.125rem;
  font-size: 14px;
  line-height: 1.45;
  color: var(--fg);
  text-wrap: balance;
}

.academy-lists {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 48rem) {
  .academy-lists {
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
  }
}

.tick-list {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}

/* The 1px gaps between items are the parent's background showing through, so
   each item has to be opaque - `--ink` is the page ground, the same colour
   the section sits on. A transparent item lets the hairline colour fill the
   whole row. */
.tick-list li {
  position: relative;
  padding: 0.75rem 0 0.75rem 1.5rem;
  background: var(--ink);
  font-size: 15px;
  color: var(--fg-dim);
}

.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.4em;
  width: 8px;
  height: 1px;
  background: var(--gold);
}

.academy-enquire {
  padding: 2rem 1.5rem;
  text-align: center;
}

@media (min-width: 48rem) {
  .academy-enquire { padding: 2.5rem; }
}

.academy-enquire__body {
  max-width: 34rem;
  margin: 0.875rem auto 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}

.academy-enquire__tel {
  margin-top: 1.75rem;
  letter-spacing: 0.1em;
}