/* =========================================================
   Skinthetics – child page cards
   Styles: photo (text over the photo) and editorial (text below).
   All classes are prefixed sk-cards to avoid theme clashes.
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400&display=swap");

.sk-cards {
  /* ---- Settings ---- */
  --sk-ink: #000000;
  --sk-muted: #4d5152;
  --sk-brand: #55716b;          /* link colour + empty-image tile */
  --sk-pad-y: 64px;
  --sk-pad-x: 40px;
  --sk-cols: 3;
  --sk-mark-img: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%222980.0%20115.2%20516.2%201030.6%22%3E%3Cpath%20fill=%22%23000%22%20fill-rule=%22evenodd%22%20d=%22M3148.50,1137.12C3054.27,1103.65%202991.55,1023.43%202991.62,936.50C2991.69,864.33%203043.28,815.20%203103.08,830.37C3165.60,846.23%203183.76,918.37%203138.13,969.66C3108.88,1002.54%203100.79,1019.21%203100.60,1047.00C3100.34,1083.07%203114.72,1105.31%203157.32,1134.73C3165.91,1140.66%203161.68,1141.80%203148.50,1137.12Z%20M3427.65,1056.53C3427.34,1055.72%203427.73,1051.11%203428.53,1046.28C3438.61,984.77%203402.07,925.79%203316.00,864.63C3270.49,832.29%203240.85,813.37%203193.50,786.45C3093.09,729.35%203042.45,684.72%203015.73,629.77C2984.95,566.50%202984.32,503.96%203013.83,441.50C3022.00,424.20%203022.00,423.98%203014.56,408.02C2983.96,342.44%202988.76,264.15%203027.00,205.00C3038.16,187.75%203040.27,188.72%203037.86,209.97C3033.14,251.50%203052.01,295.94%203090.98,335.06C3131.01,375.24%203173.47,404.23%203316.31,488.88C3373.88,523.00%203406.91,550.28%203434.65,586.62C3484.56,652.01%203492.18,738.89%203454.39,811.84C3446.62,826.84%203446.62,824.95%203454.40,840.71C3486.26,905.31%203481.74,979.82%203442.19,1041.86C3433.66,1055.26%203428.97,1059.98%203427.65,1056.53Z%20M3431.70,794.33C3433.73,789.05%203426.07,766.20%203416.76,749.77C3390.60,703.59%203341.04,663.14%203234.50,600.99C3123.34,536.15%203085.90,508.24%203046.75,461.00C3026.12,436.11%203043.18,491.28%203065.11,520.38C3097.24,563.02%203141.44,596.48%203242.95,655.01C3336.51,708.96%203383.85,743.49%203414.26,779.96C3427.69,796.07%203430.23,798.16%203431.70,794.33Z%20M3371.00,420.52C3325.13,411.36%203297.83,368.03%203309.49,322.87C3313.88,305.83%203319.80,295.93%203336.16,278.18C3385.38,224.81%203381.79,167.56%203326.80,128.75C3321.96,125.33%203318.00,121.97%203318.00,121.27C3318.00,119.22%203335.59,119.50%203336.39,121.56C3336.71,122.42%203340.48,124.73%203344.74,126.70C3427.04,164.65%203478.13,235.66%203478.41,312.50C3478.66,383.03%203429.73,432.23%203371.00,420.52Z%22/%3E%3C/svg%3E");

  color: var(--sk-ink);
  font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sk-cards, .sk-cards *, .sk-cards *::before, .sk-cards *::after { box-sizing: border-box; }
.sk-cards--cols-2 { --sk-cols: 2; }
.sk-cards--cols-4 { --sk-cols: 4; }

.sk-cards .sk-cards__wrap { max-width: 1320px; margin: 0 auto; padding: var(--sk-pad-y) var(--sk-pad-x); }
.sk-cards--flush .sk-cards__wrap { max-width: none; padding: 0; }

.sk-cards .sk-cards__hd { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-bottom: 56px; }
.sk-cards .sk-cards__title { margin: 0; color: var(--sk-ink); font-family: inherit; font-weight: 200; font-size: clamp(52px, 8vw, 104px); line-height: .92; letter-spacing: -0.04em; text-transform: none; }
.sk-cards .sk-cards__intro { margin: 0; max-width: 36ch; color: var(--sk-muted); font-size: 18px; line-height: 1.5; font-weight: 300; text-transform: none; }

.sk-cards .sk-cards__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--sk-cols), minmax(0, 1fr)); gap: 40px 24px; }
.sk-cards .sk-cards__item { list-style: none; margin: 0; padding: 0; }
.sk-cards .sk-cards__card { position: relative; display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.sk-cards .sk-cards__card:focus-visible { outline: 2px solid var(--sk-ink); outline-offset: 4px; }

.sk-cards .sk-cards__media { position: relative; display: block; overflow: hidden; isolation: isolate; aspect-ratio: 4 / 5; border-radius: 4px; background: #1a1a1a; }
.sk-cards .sk-cards__media--empty { background: var(--sk-brand); }
.sk-cards .sk-cards__media .sk-cards__img {
  /* !important so theme/builder image rules (e.g. "img { height: auto }") can't stop the photo filling the card */
  position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 0;
  display: block !important; width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important;
  max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  aspect-ratio: auto !important; object-fit: cover !important; object-position: center !important; box-shadow: none !important;
}
.sk-cards .sk-cards__mark { position: absolute; z-index: 2; aspect-ratio: .5; height: 62%; right: -9%; top: -8%; transform: rotate(14deg); background-color: rgba(255,255,255,.24); pointer-events: none;
  -webkit-mask: var(--sk-mark-img) no-repeat center / contain; mask: var(--sk-mark-img) no-repeat center / contain; }
.sk-cards .sk-cards__media--empty .sk-cards__mark { height: 78%; right: 6%; top: 10%; transform: none; background-color: rgba(255,255,255,.2); }

.sk-cards .sk-cards__ttl { display: block; margin: 0; font-weight: 300; letter-spacing: -0.015em; text-transform: none; }
.sk-cards .sk-cards__exc { display: block; margin: 0; font-weight: 300; text-transform: none; }
.sk-cards .sk-cards__more { display: inline-flex; align-items: center; gap: 12px; font-weight: 300; }
.sk-cards .sk-cards__chip { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid currentColor; }

/* Slow zoom on hover */
@media (prefers-reduced-motion: no-preference) {
  .sk-cards .sk-cards__img { transition: transform 1.6s cubic-bezier(.22,.61,.36,1); }
  .sk-cards .sk-cards__card:hover .sk-cards__img, .sk-cards .sk-cards__card:focus-visible .sk-cards__img { transform: scale(1.1); }
}

/* ---------- Style: photo ---------- */
.sk-cards--photo .sk-cards__card { display: block; }
.sk-cards--photo .sk-cards__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.34) 34%, rgba(0,0,0,0) 62%); }
.sk-cards--photo .sk-cards__body { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 24px; display: flex; flex-direction: column; gap: 10px; color: #fff; }
.sk-cards--photo .sk-cards__ttl { max-width: calc(100% - 56px); color: #fff; font-size: 32px; line-height: 1.05; }
.sk-cards--photo .sk-cards__exc { max-width: calc(100% - 56px); color: rgba(255,255,255,.9); font-size: 16px; line-height: 1.45; }
.sk-cards--photo .sk-cards__more { position: absolute; right: 24px; bottom: 24px; gap: 0; color: #fff; }
.sk-cards--photo .sk-cards__more-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sk-cards--photo .sk-cards__card:hover .sk-cards__chip { background: #fff; color: #000; }

/* ---------- Style: editorial ---------- */
.sk-cards--editorial .sk-cards__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding-top: 22px; }
.sk-cards--editorial .sk-cards__ttl { color: var(--sk-ink); font-size: 30px; line-height: 1.08; }
.sk-cards--editorial .sk-cards__exc { color: var(--sk-muted); font-size: 17px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sk-cards--editorial .sk-cards__more { align-self: flex-start; margin-top: auto; padding: 8px 0 4px; gap: 10px; color: var(--sk-brand); font-size: 17px;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 2px) / 0 1px no-repeat; transition: background-size .35s ease; }
.sk-cards--editorial .sk-cards__chip { width: auto; height: auto; border: 0; }
.sk-cards--editorial .sk-cards__card:hover .sk-cards__more, .sk-cards--editorial .sk-cards__card:focus-visible .sk-cards__more { background-size: calc(100% - 26px) 1px; }
.sk-cards--editorial .sk-cards__mark { height: 48%; background-color: rgba(255,255,255,.2); }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .sk-cards--cols-4 { --sk-cols: 2; }
}
@media (max-width: 1023px) {
  .sk-cards { --sk-pad-y: 56px; --sk-pad-x: 28px; }
  .sk-cards--cols-3 { --sk-cols: 2; }
  .sk-cards .sk-cards__hd { margin-bottom: 40px; }
}
@media (max-width: 699px) {
  .sk-cards { --sk-pad-y: 48px; --sk-pad-x: 16px; --sk-cols: 1 !important; }
  .sk-cards .sk-cards__hd { margin-bottom: 32px; }
  .sk-cards .sk-cards__title { font-size: 56px; }
  .sk-cards .sk-cards__intro { font-size: 16px; }
  .sk-cards .sk-cards__grid { gap: 14px; }
  .sk-cards--editorial .sk-cards__grid { gap: 32px; }
  .sk-cards .sk-cards__media { aspect-ratio: 4 / 3; }
  .sk-cards--photo .sk-cards__ttl, .sk-cards--editorial .sk-cards__ttl { font-size: 28px; }
}