/* 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);
}

/* ---- 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);
  border-bottom: 4px solid var(--ac-golden-sun);

  /* 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);
}

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

.acmm-brand img {
  display: block;
  height: var(--acmm-logo-h);
  width: auto;
  /* Collapse the SVG's clear space so only its letters take up room. */
  margin-top: calc(var(--acmm-logo-h) * -0.2896);
  margin-bottom: calc(var(--acmm-logo-h) * -0.3435);
}

.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 -------------------------------------------- */

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

/* ---- 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;
}

.acmm-cta__tile .ac-btn {
  align-self: flex-start;
}

.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);
    border-bottom: 4px solid var(--ac-golden-sun);
  }

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

  .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-quote__mark {
    font-size: 96px;
  }
}