/* ==========================================================================
   Granito Group — "Portefólio aberto" (Approach section)
   Self-contained stylesheet. No framework, no build step.
   Rename the `portfolio-` / `direction-` prefix if your site already uses it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts.
   Point these at wherever you upload the two .ttf files in /assets.
   (Neue Haas Grotesk is licensed to Granito — keep using the same licence.)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Granito Display";
  src: url("assets/granito-display-black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Granito Text";
  src: url("assets/granito-text-roman.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Palette + type (scoped to the section, so nothing leaks into your site).
   -------------------------------------------------------------------------- */
.portfolio-direction {
  --direction-paper: oklch(0.96 0.003 225);
  --direction-ink: oklch(0.23 0.006 225);
  --direction-teal: oklch(0.43 0.078 225);
  --direction-grey: oklch(0.76 0.003 225);
  --direction-rule: oklch(0.78 0.008 225);
  --portfolio-font-text: "Granito Text", "Helvetica Neue", Arial, sans-serif;
  --portfolio-font-display: "Granito Display", "Helvetica Neue", Arial, sans-serif;

  padding: 28px 28px 20px;
  background: var(--direction-grey);
  color: var(--direction-ink);
  font-family: var(--portfolio-font-text);
}

/* --------------------------------------------------------------------------
   3. Top line: "Granito Group" / "Our approach"
   -------------------------------------------------------------------------- */
.direction-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--direction-rule);
}
.portfolio-brand { display: flex; gap: 12px; align-items: center; }

/* --------------------------------------------------------------------------
   4. The open portfolio spread
   -------------------------------------------------------------------------- */
.portfolio-spread {
  position: relative;
  aspect-ratio: 3 / 2;
  margin: 20px -14px 0;
  isolation: isolate;
}
.portfolio-book { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Large watermark of the original symbol, clipped to the left (white) page. */
.portfolio-watermark-clip {
  position: absolute;
  inset: 9.1% 50.1% 14.2% 5.1%;
  overflow: hidden;
  pointer-events: none;
}
.portfolio-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 94%;
  height: auto;
  aspect-ratio: 3508 / 3315;
  transform: translate(-50%, -50%) rotate(-3deg);
  fill: var(--direction-teal);
  opacity: 0.12;
  mix-blend-mode: multiply;
}

/* Left page: the chapter text, printed on the paper. */
.portfolio-left {
  position: absolute;
  top: 19%;
  left: 9%;
  width: 34%;
  mix-blend-mode: multiply;
  animation: direction-enter 0.6s ease both;
}
.portfolio-printed-page {
  transform: rotate(-0.8deg);
  transform-origin: top left;
  opacity: 0.95;
}
.portfolio-printed-copy {
  transform: skewY(-0.45deg);
  transform-origin: left center;
}
.folio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 11px/1.2 var(--portfolio-font-text);
}
.portfolio-left h3 {
  font-family: var(--portfolio-font-display);
  font-weight: 900;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--direction-teal);
  margin: 24px 0 22px;
}
.portfolio-left h3 span { display: block; font-size: 38px; }
.portfolio-left p { font-size: 14px; line-height: 1.5; max-width: 240px; }
.portfolio-printed-copy h3,
.portfolio-printed-copy p { text-shadow: none; }

/* "Learn More" link */
.direction-more {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  height: 36px;
  padding: 0;
  color: inherit;
  font-size: 12px;
  text-decoration: none;
  border-radius: 0;
}
.direction-more:hover { text-decoration: underline; }
.direction-more svg { width: 14px; height: 14px; }

/* Right page: the photograph, cut to the paper's edge. */
.portfolio-right {
  position: absolute;
  top: 12.5%;
  left: 54%;
  width: 39%;
  height: 71.5%;
  mix-blend-mode: multiply;
  animation: direction-enter 0.6s ease both;
}
.portfolio-right img { width: 100%; height: 100%; object-fit: cover; }
.portfolio-printed-photo {
  height: 100%;
  clip-path: polygon(0 1%, 25% 0, 60% 0.4%, 100% 1.2%, 100% 100%, 60% 99.6%, 25% 99.3%, 0 100%);
  opacity: 0.97;
}

/* --------------------------------------------------------------------------
   5. Chapter navigation
   -------------------------------------------------------------------------- */
.portfolio-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.portfolio-navigation > div { display: flex; gap: 20px; }
.portfolio-navigation button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--direction-ink);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.portfolio-navigation button:hover { color: var(--direction-teal); }
.portfolio-navigation button[aria-pressed="true"] {
  color: var(--direction-teal);
  border-bottom: 1px solid var(--direction-teal);
}
.portfolio-navigation button:disabled { opacity: 0.4; cursor: default; }
.portfolio-navigation button svg { width: 18px; height: 18px; }

@keyframes direction-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   6. Tablet
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1100px) {
  .portfolio-left h3 { font-size: 44px; margin-top: 24px; }
  .portfolio-left h3 span { font-size: 30px; }
  .portfolio-left p { font-size: 12px; }
}

/* --------------------------------------------------------------------------
   7. Mobile — the book becomes a single sheet
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .portfolio-direction { padding: 22px 16px; }
  .portfolio-spread {
    min-height: 580px;
    aspect-ratio: auto;
    margin: 20px 0;
    background: var(--direction-paper);
    /* Keep this path correct if you move the CSS file or inline it elsewhere. */
    background-image: url("assets/approach-open-book.jpg");
    background-size: 225% 130%;
    background-position: 4% 35%;
  }
  .portfolio-book { display: none; }
  .portfolio-left { left: 9%; top: 7%; width: 82%; }
  .portfolio-left h3 { font-size: 40px; margin: 22px 0 12px; }
  .portfolio-left h3 span { font-size: 30px; }
  .portfolio-left p { font-size: 13px; }
  .portfolio-right { left: 9%; top: 52%; width: 82%; height: 44%; }
  .portfolio-printed-page { transform: rotate(-0.4deg); }
  .portfolio-printed-copy { transform: none; }
  .portfolio-printed-photo { clip-path: none; }
  .portfolio-watermark-clip { inset: 0 0 52% 0; }
  .portfolio-watermark { width: 86%; opacity: 0.1; transform: translate(-50%, -50%) rotate(-2deg); }
  .portfolio-navigation { gap: 4px; }
  .portfolio-navigation > div { flex: 1; gap: 0; flex-direction: column; align-items: center; }
  .portfolio-navigation button { font-size: 11px; }
}

/* --------------------------------------------------------------------------
   8. Respect the visitor's motion preference
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .portfolio-left, .portfolio-right { animation: none; }
}