/* 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 Media site */

/* The Media look: the whole page sits on the ACDS inverse surface (graphite),
   headlines are Poppins bold at display size, Golden Sun is the one accent and
   every photograph is toned from Graphite Gray to Golden Soft by the inline SVG
   filter #acmm-duotone in index.html. Colours, type, space and motion are ACDS
   tokens from ../acds/. */

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

body {
  min-height: 100vh;
}

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

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

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

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

.acmm-display {
  margin: 0;
  max-width: none;
  font-size: clamp(40px, 5vw, 72px);
  font-weight: var(--ac-weight-bold);
  line-height: 1.02;
  letter-spacing: var(--ac-tracking-tight);
}

/* A one-line heading that fills the content width. --acmm-line-em is the
   heading's width in ems (its measured width at 100px over 100, with a little
   room), set on the element; --ac-vw is the real viewport width signature.js
   sets. Phones keep the ordinary wrapping heading. */
@media (min-width: 768px) {
  .acmm-display--line {
    white-space: nowrap;
    font-size: calc((var(--ac-vw, 100vw) - 2 * var(--acmm-gutter)) / var(--acmm-line-em));
  }
}

/* ---- Photographs: always graphite to Golden Soft ---------------------- */

.acmm-photo {
  margin: 0;
  overflow: hidden;
  background-color: var(--ac-graphite-gray);
}

.acmm-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.1) url("#acmm-duotone");
  transition: transform var(--ac-duration-slow) var(--ac-ease);
}

.acmm-photo:hover img {
  transform: scale(1.04);
}

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

.acmm-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(--acmm-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. */
  --acmm-logo-h: clamp(42px, 3.9vw, 57px);
  --acmm-nav-size: calc(var(--acmm-logo-h) * 0.367 / 0.698);
}

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

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

.acmm-brand img {
  display: block;
  flex: none;
  max-width: none;
  height: var(--acmm-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(--acmm-logo-h) * -0.2896);
  margin-bottom: calc(var(--acmm-logo-h) * -0.3435);
  margin-right: calc(var(--acmm-logo-h) * -0.1846);
}

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

.acmm-nav a,
.acmm-toggle {
  color: var(--ac-text-heading);
  font-family: var(--ac-font-text);
  font-size: var(--acmm-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;
}

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

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


.acmm-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: the gallery wall -------------------------------------------- */

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

.acmm-wall {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 120px;
  gap: var(--acmm-gap);
}

.acmm-title-tile {
  grid-column: 1 / span 5;
  grid-row: 1 / span 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--ac-space-10);
}

.acmm-title-tile h1 {
  margin: 0 0 var(--ac-space-8);
  font-size: clamp(36px, 4.2vw, 62px);
  font-weight: var(--ac-weight-bold);
  line-height: 1;
  letter-spacing: var(--ac-tracking-tight);
  max-width: none;
}

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

.acmm-wall .acmm-p1 { grid-column: 6 / span 4; grid-row: 1 / span 5; }
.acmm-wall .acmm-p2 { grid-column: 10 / span 3; grid-row: 1 / span 3; }
.acmm-wall .acmm-p3 { grid-column: 10 / span 3; grid-row: 4 / span 2; }
.acmm-wall .acmm-p4 { grid-column: 1 / span 3; grid-row: 5 / span 2; }
.acmm-wall .acmm-p5 { grid-column: 6 / span 7; grid-row: 6 / span 1; }

.acmm-fact {
  grid-column: 4 / span 2;
  grid-row: 5 / span 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--ac-space-2);
  padding: var(--ac-space-8);
  background-color: var(--acmm-raised);
}

.acmm-fact strong {
  font-size: var(--ac-text-figure);
  font-weight: var(--ac-weight-bold);
  line-height: 1;
}

.acmm-fact span {
  font-size: var(--ac-text-xs);
  letter-spacing: var(--ac-tracking-wide);
  text-transform: uppercase;
}

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

/* ---- Services: two bold lists ------------------------------------------ */

.acmm-services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ac-space-11);
}

.acmm-services h2 {
  margin: 0 0 var(--ac-space-5);
  font-size: clamp(40px, 4.6vw, 66px);
  font-weight: var(--ac-weight-bold);
  line-height: 1;
  letter-spacing: var(--ac-tracking-tight);
}

.acmm-services p {
  margin: 0 0 var(--ac-space-10);
  max-width: none;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.5;
  color: var(--ac-text-heading);
}

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

.acmm-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ac-space-8);
  max-width: none;
  padding: var(--ac-space-6) 0;
  border-bottom: var(--ac-border-width) solid var(--ac-border);
  transition: padding var(--ac-duration-fast) var(--ac-ease);
}

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

.acmm-list strong {
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: var(--ac-weight-bold);
  line-height: 1.2;
}

.acmm-list span {
  flex: none;
  font-size: var(--ac-text-sm);
}

/* ---- Projects: a wall of tiles ----------------------------------------- */

.acmm-projects {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(170px, auto);
  gap: var(--acmm-gap);
  margin-top: var(--ac-space-11);
}

.acmm-project {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--ac-space-2);
  padding: var(--ac-space-8);
  background-color: var(--acmm-raised);
  color: var(--ac-text-heading);
  text-decoration: none;
}

.acmm-project--wide {
  grid-column: span 4;
}

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

.acmm-project p {
  margin: 0;
  font-size: var(--ac-text-xs);
}

.acmm-project--lead {
  grid-column: span 6;
  grid-row: span 2;
  justify-content: space-between;
  padding: var(--ac-space-9);
  background-color: var(--ac-pure-white);
  color: var(--ac-graphite-gray);
}

.acmm-project--lead h3 {
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.05;
  color: var(--ac-graphite-gray);
}

.acmm-project--lead p {
  font-size: var(--ac-text-base);
}

.acmm-project--lead .acmm-label {
  margin: 0;
  font-size: var(--ac-text-xs);
}

.acmm-project--more {
  grid-column: span 9;
}

.acmm-project.ac-surface-accent {
  background-color: var(--ac-surface-accent);
  color: var(--ac-text-on-accent);
}

.acmm-project.ac-surface-accent h3 {
  color: var(--ac-text-on-accent);
}

/* ---- Case study -------------------------------------------------------- */

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

.acmm-case .acmm-photo {
  grid-column: span 5;
  min-height: 520px;
}

.acmm-case__body {
  grid-column: span 7;
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-9);
  padding: var(--ac-space-11);
  background-color: var(--acmm-raised);
}

.acmm-case__body h2 {
  margin: 0;
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: var(--ac-weight-bold);
  line-height: 1.05;
}

.acmm-case__body p {
  margin: 0;
  max-width: none;
}

.acmm-figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ac-space-8);
  margin: 0;
}

.acmm-figures div {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--ac-space-2);
}

.acmm-figures dd {
  margin: 0;
  font-size: var(--ac-text-figure);
  font-weight: var(--ac-weight-bold);
  line-height: 1;
}

.acmm-figures dt {
  font-size: var(--ac-text-xs);
  letter-spacing: var(--ac-tracking-wide);
  text-transform: uppercase;
}

.acmm-source {
  font-size: var(--ac-text-xs);
}

/* ---- Testimonial: a quote tile beside a gold attribution tile --------- */

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

.acmm-quote__text {
  grid-column: span 8;
  margin: 0;
  max-width: none;
  padding: var(--ac-space-11);
  background-color: var(--acmm-raised);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: var(--ac-weight-light);
  line-height: 1.45;
}

.acmm-quote__by {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--ac-space-9);
  padding: var(--ac-space-10);
}

.acmm-quote__mark {
  font-size: 160px;
  font-weight: var(--ac-weight-bold);
  line-height: 0.8;
}

.acmm-quote__by strong {
  display: block;
  margin-bottom: var(--ac-space-3);
  font-size: var(--ac-h4);
  font-weight: var(--ac-weight-bold);
  line-height: 1.15;
}

.acmm-quote__by span span {
  display: block;
  font-size: var(--ac-text-lead);
  line-height: 1.5;
}

.acmm-display + .acmm-quote {
  margin-top: var(--ac-space-11);
}

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

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

.acmm-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(--acmm-raised);
}

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

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

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

.acmm-groupline {
  margin-bottom: var(--ac-space-11);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ac-space-6);
  padding-block: 0;
  color: var(--ac-text-heading);
  text-align: center;
  text-decoration: none;
}

.acmm-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);
}

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

/* ---- Call to action: a gold tile beside a photograph ------------------- */

.acmm-cta__tile {
  grid-column: span 8;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--ac-space-11);
  min-height: 460px;
  padding: var(--ac-space-11);
}

.acmm-cta__tile .acmm-display {
  max-width: none;
}

/* The tile spans 8 of 12 columns; its text is sized so the longest line,
   "No detail is too intricate" (13.3em), fits the tile on one line. */
.acmm-cta__text {
  font-size: clamp(30px, 3.9vw, 58px);
  white-space: nowrap;
}

/* The call to action is the text itself: the second half of the tile links
   to the contact form and underlines on hover. */
.acmm-cta__link {
  display: block;
  color: var(--ac-text-on-accent);
  text-decoration: none;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
}

.acmm-cta__link:hover,
.acmm-cta__link:focus-visible {
  color: var(--ac-text-on-accent);
  text-decoration: underline;
}

.acmm-cta__photo {
  grid-column: span 4;
  min-height: 460px;
}

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

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

.acmm-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(36px, 7.4vw, 112px);
  font-weight: var(--ac-weight-bold);
  line-height: 1;
  letter-spacing: var(--ac-tracking-tight);
  text-decoration: none;
  overflow-wrap: anywhere;
  text-align: center;
}

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

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

.acmm-footer__places section {
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-4);
  padding: var(--ac-space-9);
  background-color: var(--acmm-raised);
}

.acmm-footer__places 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;
}

.acmm-footer__places address,
.acmm-footer__places p {
  margin: 0;
  font-style: normal;
  line-height: 1.7;
}


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

/* Social links: a centred row of square tiles, like the rest of the wall. */
.acmm-social {
  list-style: none;
  margin: 0 0 var(--ac-space-11);
  padding: 0;
  max-width: none;
  display: flex;
  justify-content: center;
  gap: var(--acmm-gap);
}

.acmm-social li {
  max-width: none;
}

.acmm-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background-color: var(--acmm-raised);
  color: var(--ac-text-heading);
  font-size: 28px;
  transition: background-color var(--ac-duration-fast) var(--ac-ease),
              color var(--ac-duration-fast) var(--ac-ease);
}

.acmm-social a:hover {
  background-color: var(--ac-golden-sun);
  color: var(--ac-graphite-gray);
}

.acmm-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);
}

.acmm-footer__bottom p {
  margin: 0;
}

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

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

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

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

.acmm-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 {
    --acmm-band: var(--ac-space-10);
  }

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

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

  .acmm-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(--acmm-gutter) var(--ac-space-10);
    background-color: var(--ac-surface-dark);
  }

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

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

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

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

  .acmm-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(200px, auto);
  }

  .acmm-wall > * {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .acmm-wall .acmm-title-tile {
    grid-column: 1 / -1 !important;
    min-height: 420px;
  }

  .acmm-services {
    grid-template-columns: 1fr;
  }

  .acmm-project,
  .acmm-project--wide,
  .acmm-project--more {
    grid-column: span 6;
  }

  .acmm-project--lead,
  .acmm-case .acmm-photo,
  .acmm-case__body,
  .acmm-quote__text,
  .acmm-quote__by,
  .acmm-cta__tile,
  .acmm-cta__photo {
    grid-column: 1 / -1;
  }

  .acmm-cta__photo {
    min-height: 280px;
  }

  .acmm-cta__text {
    font-size: clamp(22px, 6.2vw, 58px);
  }

  .acmm-case .acmm-photo {
    min-height: 320px;
  }

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

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

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


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

  .acmm-social a {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }

  .acmm-title-tile {
    padding: var(--ac-space-8);
  }

  .acmm-project,
  .acmm-project--wide,
  .acmm-project--more,
  .acmm-project--lead {
    grid-column: 1 / -1;
  }

  .acmm-case__body {
    padding: var(--ac-space-8);
  }

  .acmm-figures,
  .acmm-values,
  .acmm-footer__places {
    grid-template-columns: 1fr;
  }

  .acmm-quote__text,
  .acmm-quote__by,
  .acmm-cta__tile {
    padding: var(--ac-space-8);
  }

  .acmm-cta__tile {
    min-height: 0;
  }

  .acmm-cta__text {
    font-size: calc((var(--ac-vw, 100vw) - 2 * var(--acmm-gutter) - 2 * var(--ac-space-8)) / 13.6);
  }

  .acmm-quote__mark {
    font-size: 96px;
  }
}