/*
Theme Name: Paloma Dray
Theme URI: https://github.com/Hay-and-Rice/Palomadray-Theme
Author: Hay & Rice
Author URI: https://hayandrice.co.uk
Description: Custom portfolio theme for palomadray.com.
Version: 1.0.0
Requires PHP: 8.1
Text Domain: palomadray
*/

/* ---------- tokens ---------- */
:root {
  --bg: #fbf4f7;
  --ink: #000;
  --ink-soft: #272727;
  --pill: #ffdfee;
  --font: "Jost", "Futura", sans-serif;
}

@font-face {
  font-family: "Jost";
  src: url("assets/fonts/jost-v20-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("assets/fonts/jost-v20-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ---------- header pills ---------- */
.pill {
  position: fixed;
  top: 30px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 500px;
  background: var(--pill);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.pill--about { left: 30px; }
.pill--contact { right: 30px; }

/* ---------- homepage deck ---------- */
.deck {
  --slot: max(72px, 9.8vh);
  padding: calc(50vh - var(--slot) / 2) 0;
}
.deck-card {
  display: block;
  width: min(8.4vw, 215px);
  min-width: 92px;
  margin: 0 auto;
  height: var(--slot);
  position: relative;
  will-change: transform;
}
.deck-card img {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: auto;
  aspect-ratio: 768 / 461;
  object-fit: cover;
  border-radius: 6px;
}

/* ---------- view toggle ---------- */
.view-toggle {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 80;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.view-toggle img { width: 100%; height: 100%; }

/* ---------- grid view ---------- */
.grid-view {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  background: var(--bg);
  padding: 10px;
}
.grid-view[hidden] { display: none; }
.grid-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.grid-list a {
  display: block;
  aspect-ratio: 768 / 461;
  border-radius: 4px;
  overflow: hidden;
}
.grid-list img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.grid-list a:hover img { transform: scale(1.04); }

/* ---------- project single ---------- */
.project {
  padding: 120px 20px 60px;
}
.project-media {
  display: grid;
  gap: 30px;
  justify-items: center;
}
.project-media figure {
  margin: 0;
  width: 100%;
  max-width: 1400px;
}
.project-media figure.is-portrait { max-width: 640px; }
.project-media img { width: 100%; height: auto; border-radius: 8px; }
.project-text {
  max-width: 900px;
  margin: 60px auto 0;
  font-size: 18px;
  line-height: 1.6;
}

/* ---------- big-type pages (about, services) ---------- */
.bigtype {
  padding: 160px 10.4vw 80px;
}
.bigtype-content {
  font-size: clamp(24px, 2.2vw, 56px);
  line-height: 1.16;
  font-weight: 700;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.bigtype-content p { margin: 0; }
.bigtype-content a { text-decoration: underline; text-underline-offset: 0.12em; }
.bigtype-content img { width: min(611px, 100%); margin-top: 8em; }

.services-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: clamp(24px, 2.2vw, 56px);
  line-height: 1.16;
  font-weight: 700;
  text-transform: uppercase;
}
.services-list a { text-decoration: underline; text-underline-offset: 0.12em; }

/* ---------- footer ---------- */
.site-footer {
  padding: 40px 30px 30px;
}
.footer-nav {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}
.footer-nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 34px;
  box-shadow: inset 10px 10px 40px 0 rgba(237, 237, 237, 0.75),
    inset 0 0 5px 0 rgba(255, 255, 255, 0.25);
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 18px;
  font-weight: 700;
}
.footer-social {
  display: flex;
  gap: 20px;
}
.footer-social img { width: 20px; height: 20px; }
.footer-bottom a { text-decoration: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .grid-list { grid-template-columns: repeat(2, 1fr); }
  .bigtype { padding: 120px 24px 60px; }
  .footer-bottom { flex-direction: column; }
  .pill { top: 20px; }
  .pill--about { left: 20px; }
  .pill--contact { right: 20px; }
  .view-toggle { right: 20px; bottom: 20px; }
}