/* ==========================================================================
   TUOIL — shared components: buttons, inline calls to action, hairlines
   Section-specific styling lives in assets/css/sections/*.css
   ========================================================================== */

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 56px;
  padding: 0 var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--c-base);
  color: var(--c-on-dark);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.btn:hover { background: var(--c-base-lift); }
.btn:active { transform: translateY(1px); }

.btn--secondary {
  background: transparent;
  border-color: var(--c-border-strong);
  color: var(--c-ink);
}
.btn--secondary:hover {
  background: var(--c-surface-2);
  border-color: var(--c-ink);
}

/* On photography and on the olive panel. */
.btn--on-dark {
  background: var(--c-cream);
  color: var(--c-ink);
}
.btn--on-dark:hover { background: #FFFFFF; }

.btn--wide { width: 100%; }

/* --- Inline call to action -----------------------------------------------
   Deliberately no arrow glyph: a faint rule marks it as a link at rest, and
   a solid one draws across on hover. */
.cta-link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  border-bottom-color: color-mix(in srgb, currentColor 32%, transparent);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--dur-base) var(--ease-out);
}
.cta-link:hover,
.cta-link:focus-visible { background-size: 100% 1px; }

/* --- Aside note -----------------------------------------------------------
   For text about the page rather than of it: editorial warnings, anything
   the reader should weigh differently. */
.page-note {
  max-width: 68ch;
  margin-bottom: var(--sp-5);
  padding: var(--sp-2) var(--sp-3);
  border-left: 2px solid var(--c-border-strong);
  background: var(--c-surface-2);
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.page-note p:last-child { margin-bottom: 0; }

/* --- Eyebrow ---------------------------------------------------------------
   The small spaced capitals over a section heading on the inner pages. The
   olive holds 4.8:1 on cream, enough for type this size at this weight. */
.eyebrow {
  margin-bottom: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--c-base-glow);
}

.eyebrow--on-dark { color: var(--c-on-dark-muted); }

/* --- Benefits row ----------------------------------------------------------
   Short promises set in a row: a line icon, a title and a sentence each,
   divided by hairlines. On the olive band (--on-dark) the same row carries
   light type. Wraps to two, then to one. */
.benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.benefits__item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-2);
  align-content: start;
  padding-inline: var(--sp-4);
}

.benefits__item:first-child { padding-left: 0; }
.benefits__item:last-child { padding-right: 0; }

.benefits__item + .benefits__item::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--c-border-strong);
}

.benefits__icon {
  grid-row: span 2;
  width: 32px;
  height: 32px;
  color: var(--c-base-glow);
}

.benefits__title {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--c-ink);
}

.benefits__text {
  margin-top: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.benefits--compact .benefits__item {
  align-items: center;
  padding-inline: var(--sp-3);
}

.benefits--compact .benefits__item:first-child { padding-left: 0; }
.benefits--compact .benefits__item:last-child { padding-right: 0; }

.benefits--compact .benefits__icon {
  grid-row: auto;
  width: 36px;
  height: 36px;
}

.benefits--compact .benefits__title {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
}

.benefits--on-dark .benefits__item + .benefits__item::before { background: rgba(255, 255, 255, 0.22); }
.benefits--on-dark .benefits__icon { color: var(--c-on-dark-muted); }
.benefits--on-dark .benefits__title { color: var(--c-on-dark); }
.benefits--on-dark .benefits__text { color: var(--c-on-dark-muted); }

/* Between 1025 and ~1340 the four compact points share a narrow column:
   tighter gutters keep a long word ("partnerships") inside its cell. */
@media (min-width: 1025px) and (max-width: 1340px) {
  .benefits--compact .benefits__item { padding-inline: var(--sp-2); }
  .benefits--compact .benefits__item:first-child { padding-left: 0; }
  .benefits--compact .benefits__item:last-child { padding-right: 0; }
}

@media (max-width: 1024px) {
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-5); }
  .benefits__item:nth-child(odd) { padding-left: 0; }
  .benefits__item:nth-child(even) { padding-right: 0; }
  .benefits__item:nth-child(odd)::before { display: none; }
}

@media (max-width: 600px) {
  .benefits { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-4); }
  .benefits__item,
  .benefits__item:nth-child(odd),
  .benefits__item:nth-child(even) { padding: 0; }
  .benefits__item + .benefits__item::before { display: none; }
}

/* --- Small label ---------------------------------------------------------- */
.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--c-muted);
}

/* ==========================================================================
   Photograph panels
   The page's one photograph shape, shared by the sourcing group, the
   production band and the IFEAT band: a hexagon lying on its side -- flat top
   and bottom, a point at each end on the half-height line -- the same figure
   the hero's honeycomb is built from, stretched out.

   The hexagon belongs to the group, not to the picture. A row is clipped once
   as a whole, so a row of pictures reads as one shape sliced up: the seams
   inside it are straight and only the two ends carry a point.

   The seams lean at the 15deg system angle. A panel is therefore sheared and
   its inner box sheared back, which leaves the picture upright inside a
   slanted opening. The lean is exactly tangent to the point, so a sheared end
   panel still fills its half of the hexagon with no gap.
   ========================================================================== */
.panel-row {
  /* how far each point reaches, off the row's own height, so the angle holds
     at every size; --panel-h is set by the block that uses the row */
  --panel-nose: calc(var(--panel-h) * 0.32);
  display: flex;
  gap: 6px;
  height: var(--panel-h);
  clip-path: polygon(
    0 50%,
    var(--panel-nose) 0,
    calc(100% - var(--panel-nose)) 0,
    100% 50%,
    calc(100% - var(--panel-nose)) 100%,
    var(--panel-nose) 100%);
}

/* Rows that run off the edge of the page keep no point on that side. */
.panel-row--open-start {
  clip-path: polygon(
    0 0,
    calc(100% - var(--panel-nose)) 0,
    100% 50%,
    calc(100% - var(--panel-nose)) 100%,
    0 100%);
}

.panel-row--open-end {
  clip-path: polygon(
    0 50%,
    var(--panel-nose) 0,
    100% 0,
    100% 100%,
    var(--panel-nose) 100%);
}

.panel {
  position: relative;
  flex: 1 1 0;
  overflow: hidden;
}

.panel__inner { position: absolute; inset: 0; }

.panel__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}