/* ==========================================================================
   YASDER MARINE — Page-level compositions
   Services rows, product detail, contact, about values
   ========================================================================== */

/* --------------------------------------------------------------------------
   Services — one full editorial row per solution area
   -------------------------------------------------------------------------- */
.s-service { padding-block: var(--section-y-tight); border-top: 1px solid var(--line); }
.s-service:first-of-type { border-top: 0; }

.s-service__num {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--orange-700);
  display: block;
  margin-bottom: var(--space-3);
}

.s-service__list {
  display: grid;
  gap: 0.75rem;
  margin-top: var(--space-5);
}

.s-service__list li {
  position: relative;
  padding-left: 1.35rem;
  font-size: var(--step-0);
  color: var(--ink-2);
}

.s-service__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 2px;
  background: var(--orange-500);
}

/* --------------------------------------------------------------------------
   Product detail
   -------------------------------------------------------------------------- */
.s-productdetail { padding-block: var(--section-y); }
.s-productdetail + .s-productdetail { border-top: 1px solid var(--line); }

.s-productdetail__stack { display: grid; gap: var(--space-4); }

@media (min-width: 620px) {
  .s-productdetail__stack { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
}

.s-productdetail .c-figure__frame {
  background: var(--white);
  border: 1px solid var(--line);
}

.s-productdetail__meta {
  display: grid;
  gap: 0;
  margin-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.s-productdetail__meta div {
  display: grid;
  gap: 0.2rem var(--space-5);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 560px) {
  .s-productdetail__meta div { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); align-items: baseline; }
}

.s-productdetail__meta dt {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}

.s-productdetail__meta dd {
  margin: 0;
  color: var(--ink);
  font-size: var(--step-0);
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */
.s-legal { min-height:70vh; padding:clamp(9rem,14vw,13rem) 0 var(--section-y); background:var(--paper); }
.s-legal__head { display:grid; gap:1rem; padding-bottom:clamp(2rem,5vw,4rem); border-bottom:1px solid var(--line); }
.s-legal__head h1 { max-width:18ch; font-size:clamp(2.6rem,7vw,6.5rem); line-height:.94; letter-spacing:-.045em; }
.s-legal__meta { color:var(--ink-3); font:600 .72rem/1.4 var(--font-display); letter-spacing:.14em; text-transform:uppercase; }
.s-legal__layout { display:grid; gap:clamp(2.5rem,7vw,7rem); padding-top:clamp(2.5rem,6vw,5rem); }
.s-legal__nav { display:grid; align-content:start; gap:0; }
.s-legal__nav a { padding:1rem 0; border-bottom:1px solid var(--line); color:var(--ink-3); font:600 .74rem/1.4 var(--font-display); letter-spacing:.1em; text-transform:uppercase; }
.s-legal__nav a.is-current,.s-legal__nav a:hover { color:var(--ink); }
.s-legal__body { max-width:820px; color:var(--ink-2); font-size:clamp(1rem,1.25vw,1.16rem); line-height:1.9; }
.s-legal__body > * + * { margin-top:1.5em; }
.s-legal__body h2,.s-legal__body h3 { margin-top:2.2em; color:var(--ink); line-height:1.2; }
.s-legal__empty { padding:1.4rem; border:1px solid var(--line); background:var(--white); }
@media (min-width:900px) { .s-legal__layout { grid-template-columns:minmax(190px,.32fr) minmax(0,1fr); } .s-legal__nav { position:sticky; top:8rem; } }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.s-contact { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }

@media (min-width: 940px) {
  .s-contact { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
}

.s-contact__aside {
  display: grid;
  gap: var(--space-6);
  align-content: start;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--green-700);
  color: var(--on-dark-2);
  border-radius: var(--radius);
}

.s-contact__aside h2 {
  color: var(--white);
  font-size: var(--step-2);
}

.s-contact__mail {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--white);
  word-break: break-word;
  transition: color var(--dur-2) var(--ease);
}

.s-contact__mail:hover { color: var(--gold-300); }

.c-checklist { display: grid; gap: 0.85rem; }

.c-checklist li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--step--1);
  line-height: 1.6;
}

.c-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 2px;
  background: var(--gold-500);
}

.c-form__submit { justify-self: start; }

.c-category-index { display:flex; flex-wrap:wrap; gap:1.25rem 2rem; border-bottom:1px solid var(--line); }
.c-category-index a { color:var(--ink); font:600 .8rem/1 var(--font-display); letter-spacing:.12em; text-transform:uppercase; text-decoration:none; }
.c-category-index a.is-active, .c-category-index a:hover { color:var(--accent); }

/* --------------------------------------------------------------------------
   About — values register
   -------------------------------------------------------------------------- */
.s-values {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

@media (min-width: 860px) {
  .s-values { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
}

.s-values__item {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding-block: var(--space-7);
  border-bottom: 1px solid var(--line);
}

.s-values__item h3 { font-size: var(--step-2); }
.s-values__item p { color: var(--ink-2); max-width: 46ch; }

.s-values__num {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--orange-700);
}