/* SPDX-License-Identifier: LicenseRef-Proprietary
   Copyright (C) 2026, araCreate Group
   Author: Aravinth Panch <ara@aracreate.group>
   Description: This file contains the page layout for the araCreate Academy site */

/* The Academy look follows www.aracreate.media: the whole page sits on the
   ACDS inverse surface (graphite), headlines are Poppins bold at display size
   and Golden Sun is the one accent. Colours, type, space and motion are ACDS
   tokens from ../acds/. */

:root {
  --acad-gutter: var(--ac-space-8);
  --acad-band: var(--ac-space-11);
  --acad-gap: var(--ac-space-2);
  --acad-raised: var(--ac-gray-450);
}

body {
  min-height: 100vh;
}

/* ---- Frame ------------------------------------------------------------- */

.acad-wrap {
  padding-inline: var(--acad-gutter);
}

.acad-band {
  padding-block: var(--acad-band);
}

.acad-label {
  margin: 0 0 var(--ac-space-6);
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-weight-medium);
  letter-spacing: var(--ac-tracking-wide);
  text-transform: uppercase;
}

.acad-display {
  margin: 0;
  max-width: none;
  font-size: clamp(36px, 4.6vw, 66px);
  font-weight: var(--ac-weight-bold);
  line-height: 1.02;
  letter-spacing: var(--ac-tracking-tight);
  text-wrap: balance;
}

/* ---- Header: logo, links spread to the edge, a gold line beneath ------- */

.acad-header {
  position: sticky;
  top: 0;
  z-index: var(--ac-z-header);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ac-space-8);
  padding: var(--ac-space-6) var(--acad-gutter) var(--ac-space-8);
  background-color: var(--ac-surface-dark);

  /* The link capitals match the capitals in the logo and share their
     baseline. In the logo SVG the letters are 0.367 of its height and their
     baseline sits 0.3435 of its height above the bottom edge. Poppins
     capitals are 0.698em tall and sit 0.15em above the bottom of a 1-line box. */
  --acad-logo-h: clamp(42px, 3.9vw, 57px);
  --acad-nav-size: calc(var(--acad-logo-h) * 0.367 / 0.698);
}

/* The gold line runs the width of the content, inside the page gutters. */
.acad-header::after {
  content: "";
  position: absolute;
  left: var(--acad-gutter);
  right: var(--acad-gutter);
  bottom: 0;
  height: 4px;
  background-color: var(--ac-golden-sun);
}

.acad-brand {
  display: flex;
  align-items: center;
  flex: none;
}

.acad-brand img {
  display: block;
  flex: none;
  max-width: none;
  height: var(--acad-logo-h);
  width: auto;
  /* Collapse the SVG's clear space so only its letters take up room, and
     pull it right so the gold box ends on the content edge (the clear space
     right of the box is 0.1846 of the logo's height). */
  margin-top: calc(var(--acad-logo-h) * -0.2896);
  margin-bottom: calc(var(--acad-logo-h) * -0.3435);
  margin-right: calc(var(--acad-logo-h) * -0.1846);
}

.acad-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--ac-space-10);
  margin-right: var(--ac-space-11);
}

.acad-nav a,
.acad-toggle {
  color: var(--ac-text-heading);
  font-family: var(--ac-font-text);
  font-size: var(--acad-nav-size);
  font-weight: var(--ac-weight-bold);
  line-height: 1;
  letter-spacing: var(--ac-tracking-tight);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.acad-nav a {
  transform: translateY(0.15em);
}

.acad-nav a:hover {
  color: var(--ac-golden-sun);
}

.acad-toggle {
  display: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--ac-space-6);
  font-size: var(--ac-text-base);
  border: var(--ac-border-width) solid var(--ac-border-control);
  background: none;
  cursor: pointer;
}

/* ---- Hero: a gold title tile beside the subjects ----------------------- */

/* The same space below the gold line as at the page's sides. */
.acad-hero {
  padding-top: var(--acad-gutter);
}

.acad-tiles {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--acad-gap);
}

.acad-title-tile {
  grid-column: span 7;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--ac-space-11);
  min-height: 560px;
  padding: var(--ac-space-10);
}

.acad-title-tile h1 {
  margin: 0 0 var(--ac-space-9);
  font-size: clamp(40px, 5.4vw, 80px);
  font-weight: var(--ac-weight-bold);
  line-height: 1;
  letter-spacing: var(--ac-tracking-tight);
  max-width: none;
}

.acad-title-tile__logo {
  display: block;
  align-self: flex-start;
  height: clamp(64px, 6vw, 96px);
  width: auto;
}

.acad-subjects {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--ac-space-10);
  background-color: var(--acad-raised);
}

.acad-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  border-top: var(--ac-border-width) solid var(--ac-text-heading);
}

.acad-list li {
  max-width: none;
  padding: var(--ac-space-5) 0;
  border-bottom: var(--ac-border-width) solid var(--ac-border);
  transition: padding var(--ac-duration-fast) var(--ac-ease);
}

.acad-list li:hover {
  padding-left: var(--ac-space-7);
}

.acad-list strong {
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: var(--ac-weight-bold);
  line-height: 1.2;
}

.acad-intro {
  margin: var(--ac-space-11) 0 0;
  max-width: none;
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: var(--ac-weight-regular);
  line-height: 1.4;
  letter-spacing: var(--ac-tracking-tight);
  color: var(--ac-text-heading);
}

/* ---- Programmes: one tile per audience --------------------------------- */

.acad-programmes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--acad-gap);
  margin-top: var(--ac-space-11);
}

.acad-programme {
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-7);
  padding: var(--ac-space-10);
  border-top: var(--ac-border-width-strong) solid var(--ac-golden-sun);
  background-color: var(--acad-raised);
}

.acad-programme .acad-label {
  margin: 0;
}

.acad-programme h3 {
  margin: 0;
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: var(--ac-weight-bold);
  line-height: 1.1;
}

.acad-programme ul {
  flex: 1;
  margin: 0;
  padding-left: 1.1em;
  max-width: none;
}

.acad-programme li {
  margin-bottom: var(--ac-space-4);
  max-width: none;
}

.acad-programme .ac-btn {
  align-self: flex-start;
}

/* ---- Values ------------------------------------------------------------ */

.acad-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--acad-gap);
  margin-top: var(--ac-space-11);
}

.acad-values div {
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-4);
  padding: var(--ac-space-9);
  border-top: var(--ac-border-width-strong) solid var(--ac-golden-sun);
  background-color: var(--acad-raised);
}

.acad-values h3 {
  margin: 0;
  font-size: var(--ac-h5);
  font-weight: var(--ac-weight-bold);
}

.acad-values p {
  margin: 0;
  font-size: var(--ac-text-sm);
}

/* ---- Call to action: one gold tile ------------------------------------- */

.acad-cta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--ac-space-11);
  min-height: 420px;
  padding: var(--ac-space-11);
}

/* ---- araCreate Group line: big centred text, like the email ------------ */

.acad-groupline {
  margin-bottom: var(--ac-space-11);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--ac-text-heading);
  text-align: center;
  text-decoration: none;
}

.acad-groupline__text {
  max-width: none;
  font-size: clamp(26px, 3.6vw, 52px);
  text-wrap: balance;
  font-weight: var(--ac-weight-bold);
  line-height: 1.05;
  letter-spacing: var(--ac-tracking-tight);
  transition: color var(--ac-duration-fast) var(--ac-ease);
}

.acad-groupline:hover .acad-groupline__text {
  color: var(--ac-golden-sun);
}

/* ---- Footer: the same bold voice as the page --------------------------- */

.acad-footer {
  padding-block: var(--ac-space-13) var(--ac-space-10);
}

.acad-footer__mail {
  display: block;
  padding-bottom: var(--ac-space-11);
  border-bottom: 4px solid var(--ac-golden-sun);
  color: var(--ac-text-heading);
  font-size: clamp(32px, 7vw, 104px);
  font-weight: var(--ac-weight-bold);
  line-height: 1;
  letter-spacing: var(--ac-tracking-tight);
  text-decoration: none;
  overflow-wrap: anywhere;
  text-align: center;
}

.acad-footer__mail:hover {
  color: var(--ac-golden-sun);
}

.acad-footer__place {
  display: flex;
  justify-content: center;
  margin-block: var(--ac-space-11);
}

.acad-footer__place section {
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-4);
  padding: var(--ac-space-9);
  background-color: var(--acad-raised);
  text-align: center;
}

.acad-footer__place h2 {
  margin: 0 0 var(--ac-space-3);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: var(--ac-weight-bold);
  line-height: 1.1;
  text-transform: uppercase;
}

.acad-footer__place address,
.acad-footer__place p {
  margin: 0;
  max-width: none;
  font-style: normal;
  line-height: 1.7;
}

.acad-footer__place p a {
  color: var(--ac-text-heading);
  font-size: inherit;
  white-space: nowrap;
}

.acad-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ac-space-6);
  padding-top: var(--ac-space-8);
  border-top: var(--ac-border-width) solid var(--ac-border);
  font-size: var(--ac-text-xs);
}

.acad-footer__bottom p {
  margin: 0;
}

.acad-footer__bottom ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--ac-space-8);
}

.acad-footer__bottom a {
  color: var(--ac-text-heading);
  font-size: var(--ac-text-xs);
}

/* ---- Not-found page ---------------------------------------------------- */

.acad-404 {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--ac-space-9);
}

.acad-404 strong {
  font-size: clamp(96px, 16vw, 220px);
  font-weight: var(--ac-weight-bold);
  line-height: 0.9;
}

/* ---- Medium screens ---------------------------------------------------- */

@media (max-width: 991px) {
  :root {
    --acad-band: var(--ac-space-10);
  }

  /* On small screens the logo leads and the menu button follows. */
  .acad-brand {
    order: -1;
  }

  .acad-toggle {
    display: inline-flex;
    align-items: center;
  }

  .acad-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    margin-right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ac-space-7);
    padding: var(--ac-space-8) var(--acad-gutter) var(--ac-space-10);
    background-color: var(--ac-surface-dark);
  }

  .acad-header {
    align-items: center;
  }

  .acad-brand img {
    margin-block: 0;
  }

  .acad-nav a {
    font-size: 22px;
    line-height: 1.2;
    transform: none;
  }

  .acad-nav[hidden] {
    display: none;
  }

  .acad-title-tile,
  .acad-subjects {
    grid-column: 1 / -1;
  }

  .acad-title-tile {
    min-height: 420px;
  }

  .acad-programmes {
    grid-template-columns: 1fr;
  }

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

/* ---- Small screens ----------------------------------------------------- */

@media (max-width: 767px) {
  :root {
    --acad-gutter: var(--ac-space-6);
    --acad-band: var(--ac-space-9);
  }

  .acad-brand img {
    height: 48px;
    margin-right: calc(48px * -0.1846);
  }

  .acad-title-tile,
  .acad-subjects,
  .acad-programme,
  .acad-cta {
    padding: var(--ac-space-8);
  }

  .acad-cta {
    min-height: 0;
  }

  .acad-values {
    grid-template-columns: 1fr;
  }
}