/* Uzunu v2 homepage sections. Ported from docs/design-system/component-sheet.html.
   Surfaces separate content; there are no rule lines in this file. */

/* ============================================================
   HOME HERO: framing strip + two even doors
   ============================================================ */

.uzunu-home-hero {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: calc(100svh - 4.65rem);
}

.uzunu-home-framing {
  padding: clamp(1.25rem, 2.5vw, 2rem) 0 clamp(1.25rem, 2vw, 1.75rem);
  background: var(--white);
}

.uzunu-home-framing .uzunu-v2-label {
  margin-bottom: var(--s-2);
}

.uzunu-home-framing .uzunu-v2-display {
  max-width: 60%;
  margin-bottom: var(--s-2);
  font-size: var(--t-framing);
}

.uzunu-home-framing p {
  max-width: 48ch;
  margin: 0;
  color: var(--muted);
  font-size: var(--t-small);
}

.uzunu-home-doors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 26rem;
}

.uzunu-home-door {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-block: var(--s-3) var(--s-4);
  padding-inline: var(--gutter);
}

.uzunu-home-door--yougrow {
  padding-left: var(--edge);
  background: var(--warm-gray);
}

.uzunu-home-door--uzunu {
  padding-right: var(--edge);
  background: var(--ink);
  color: var(--white);
}

.uzunu-home-door-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}

.uzunu-home-door-top img {
  width: 7rem;
  height: auto;
}

.uzunu-home-door--uzunu .uzunu-home-door-top img {
  filter: invert(1);
}

.uzunu-home-door-top .uzunu-v2-num {
  font-size: 2.5rem;
}

.uzunu-home-door-body {
  margin-block: auto;
  padding-block: var(--s-3);
}

.uzunu-home-door-body .uzunu-v2-label {
  margin-bottom: 1rem;
}

/* The door content column is now grid-aligned and a fixed 560px at every
   width above --max, so the sheet's 92% cap (tuned for a full-bleed panel)
   would only cost the headline a line. */
.uzunu-home-door-body .uzunu-v2-display {
  margin-bottom: var(--s-3);
}

.uzunu-home-door-services {
  margin: 0 0 var(--s-3);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.uzunu-home-door--uzunu .uzunu-home-door-services {
  color: var(--muted-on-ink);
}

/* ============================================================
   OPERATOR BAND
   ============================================================ */

.uzunu-home-operator {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-4) var(--edge);
  background: var(--orange);
  color: var(--white);
}

.uzunu-home-operator img {
  width: 11rem;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

.uzunu-home-operator h2 {
  margin: 0 0 0.65rem;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.035em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.uzunu-home-operator p {
  max-width: 48ch;
  margin: 0;
  font-size: var(--t-small);
}

.uzunu-v2 a.uzunu-home-operator-link {
  display: inline-flex;
  min-height: 2.75rem;
  width: fit-content;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid currentColor;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.uzunu-home-operator-link:hover {
  color: var(--white);
  opacity: 0.8;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */

.uzunu-home-testimonials {
  padding: var(--s-6) 0;
  background: var(--white);
}

.uzunu-home-testimonial-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

.uzunu-home-testimonial-header h2 {
  margin: 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.uzunu-home-carousel-controls {
  display: flex;
  gap: 0.55rem;
}

.uzunu-home-carousel-button {
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-size: 1.15rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.uzunu-home-carousel-button:hover {
  background: var(--orange);
}

.uzunu-home-carousel-viewport {
  overflow: hidden;
  transition: height 280ms ease;
}

.uzunu-home-carousel-viewport:focus-visible {
  outline: 3px solid var(--orange-dark);
  outline-offset: 4px;
}

.uzunu-home-carousel-track {
  display: flex;
  align-items: flex-start;
  transition: transform 280ms ease;
}

.uzunu-home-testimonial-slide {
  flex: 0 0 100%;
  min-width: 0;
}

.uzunu-home-testimonial-slide[aria-hidden="true"] {
  visibility: hidden;
}

.uzunu-home-testimonial-slide figure {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: var(--s-4);
  align-items: center;
  margin: 0;
}

.uzunu-home-testimonial-slide img {
  width: 10rem;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

.uzunu-home-testimonial-slide blockquote {
  margin: 0 0 var(--s-3);
  font-family: var(--serif);
  font-size: var(--t-quote);
  line-height: 1.05;
  letter-spacing: -0.025em;
  overflow-wrap: break-word;
}

.uzunu-home-testimonial-slide figcaption {
  font-size: var(--t-micro);
  font-weight: 600;
}

.uzunu-home-carousel-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: var(--s-4);
}

.uzunu-home-carousel-dot {
  position: relative;
  width: 1rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.uzunu-home-carousel-dot::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: #b8b8b8;
  content: "";
  transform: translate(-50%, -50%);
}

.uzunu-home-carousel-dot.is-active::before {
  background: var(--orange);
}

/* ============================================================
   BLOG ROWS: alternating surfaces, the whole row is the link
   ============================================================ */

.uzunu-home-posts {
  padding: var(--s-6) 0;
  background: var(--warm-gray);
}

.uzunu-home-posts-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

.uzunu-home-posts-header h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.uzunu-home-posts-header p {
  max-width: 52ch;
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: var(--t-small);
}

.uzunu-home-post-list {
  padding-inline: 0;
}

.uzunu-v2 a.uzunu-home-post {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: center;
  padding: 1.25rem var(--gutter);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.uzunu-home-post:nth-child(even) {
  background: var(--white);
}

.uzunu-home-post:hover {
  background: var(--ink);
  color: var(--white);
}

.uzunu-home-post time {
  color: var(--muted);
  font-size: var(--t-micro);
  font-weight: 600;
}

.uzunu-home-post:hover time {
  color: var(--muted-on-ink);
}

.uzunu-home-post h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  overflow-wrap: break-word;
}

.uzunu-home-post-arrow {
  font-size: 1.1rem;
}

/* ============================================================
   CLOSING STRIP
   ============================================================ */

.uzunu-home-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 1.2rem var(--edge);
  /* Design system 4.11 specifies warm gray. On the homepage the blog rows
     directly above are already warm gray, so the strip is kept white to stop
     the two surfaces merging. Flagged for Onur. */
  background: var(--white);
}

.uzunu-home-contact h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.2;
}

.uzunu-home-contact p {
  max-width: 58ch;
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: var(--t-small);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Short laptop screens (1366x768 and similar):
   keep the framing line and both pills above the fold. */
@media (min-width: 48rem) and (max-height: 820px) {
  .uzunu-home-framing {
    padding-block: 1rem 0.9rem;
  }

  .uzunu-home-framing .uzunu-v2-display {
    font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  }

  .uzunu-home-door {
    padding-bottom: var(--s-3);
  }

  .uzunu-home-door-body .uzunu-v2-display {
    font-size: clamp(2.2rem, 3.9vw, 3.2rem);
  }
}

@media (max-width: 48rem) {
  .uzunu-home-hero,
  .uzunu-home-doors {
    min-height: auto;
  }

  .uzunu-home-doors {
    grid-template-columns: 1fr;
  }

  .uzunu-home-door {
    min-height: 24rem;
  }

  .uzunu-home-framing .uzunu-v2-display,
  .uzunu-home-door-body .uzunu-v2-display {
    max-width: none;
  }

  .uzunu-home-operator {
    grid-template-columns: 5rem minmax(0, 1fr);
  }

  .uzunu-home-operator img {
    width: 5rem;
  }

  .uzunu-home-operator-link {
    grid-column: 2;
    justify-self: start;
  }

  .uzunu-home-testimonial-header,
  .uzunu-home-posts-header,
  .uzunu-home-contact {
    align-items: flex-start;
    flex-direction: column;
  }

  .uzunu-home-testimonial-slide figure {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
  }

  .uzunu-home-testimonial-slide img {
    width: 4.5rem;
  }

  .uzunu-v2 a.uzunu-home-post {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem var(--s-3);
  }

  .uzunu-home-post time {
    grid-column: 1 / -1;
  }
}

@media (max-width: 24rem) {
  .uzunu-home-operator {
    grid-template-columns: 1fr;
  }

  .uzunu-home-operator-link {
    grid-column: auto;
  }

  .uzunu-home-testimonial-slide figure {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .uzunu-home-carousel-viewport,
  .uzunu-home-carousel-track {
    transition: none;
  }
}