/* Crysten Curry Elementor Widget - Project Case Study (fonts come from fonts.css) */

.cc-cs-wrap {
  --cc-cs-bg: #FBFAF8;
  --cc-cs-label: #520000;
  --cc-cs-title: #0A0708;
  --cc-cs-text: #4A4447;
  --cc-cs-line: #0A0708;
  --cc-cs-gap: clamp(8px, 1vw, 16px);
  --cc-cs-gutter: clamp(20px, 3.2vw, 56px);
  width: 100%;
  font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  box-sizing: border-box;
}
.cc-cs-wrap *, .cc-cs-wrap *::before, .cc-cs-wrap *::after { box-sizing: border-box; }

.cc-cs { background: var(--cc-cs-bg); padding: clamp(40px, 5vw, 80px) 0 clamp(48px, 6vw, 100px); }

.cc-cs__head { max-width: 1680px; margin: 0 auto; padding-inline: var(--cc-cs-gutter); }
.cc-cs-wrap .cc-cs__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(28px, 4vw, 56px);
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cc-cs-label);
}
.cc-cs-wrap .cc-cs__label { display: block; margin-bottom: 20px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cc-cs-label); }
.cc-cs-wrap .cc-cs__title {
  margin: 0;
  max-width: 14em;
  font-family: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  font-size: clamp(3.2rem, 9vw, 10rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--cc-cs-title);
}

.cc-cs__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px clamp(16px, 2.4vw, 40px);
  margin: clamp(32px, 4vw, 60px) 0 0;
  padding: 18px 0;
  border-top: 1px solid var(--cc-cs-line);
  border-bottom: 1px solid var(--cc-cs-line);
}
.cc-cs__metaitem { margin: 0; min-width: 0; }
.cc-cs-wrap .cc-cs__meta dt { margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cc-cs-label); }
.cc-cs-wrap .cc-cs__meta dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--cc-cs-title); }

.cc-cs-wrap .cc-cs__intro { margin: clamp(28px, 3.4vw, 48px) 0 0; max-width: 42em; font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: var(--cc-cs-text); }

/* ---- photos & videos ------------------------------------------------ */
.cc-cs__media {
  max-width: 1680px;
  margin: clamp(36px, 5vw, 80px) auto 0;
  padding-inline: var(--cc-cs-gutter);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--cc-cs-gap);
  align-items: start;
}
.cc-cs-wrap--edge .cc-cs__media { max-width: none; padding-inline: 0; }

.cc-cs-block { margin: 0; min-width: 0; }
.cc-cs-block--full { grid-column: span 12; }
.cc-cs-block--half { grid-column: span 6; }
.cc-cs-block--third { grid-column: span 4; }
.cc-cs-block img { display: block; width: 100%; height: auto; max-width: none; }
.cc-cs-wrap .cc-cs-block figcaption { margin-top: 8px; font-family: "IBM Plex Mono", "Courier New", monospace; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--cc-cs-text); }
.cc-cs-block--video .cc-vid-frame { --cc-vid-ratio: 16 / 9; }

@media (max-width: 760px) {
  .cc-cs-block--half, .cc-cs-block--third { grid-column: span 12; }
  .cc-cs-block--third { grid-column: span 6; }
}
@media (max-width: 480px) { .cc-cs-block--third { grid-column: span 12; } }

/* ---- centered layout (default): everything on the middle axis ---- */
.cc-cs-wrap--center .cc-cs__head { text-align: center; }
.cc-cs-wrap--center .cc-cs__back { margin-inline: auto; }
.cc-cs-wrap--center .cc-cs__title { margin-inline: auto; }
.cc-cs-wrap--center .cc-cs__meta { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; }
.cc-cs-wrap--center .cc-cs__metaitem { flex: 0 1 auto; min-width: 140px; }
.cc-cs-wrap--center .cc-cs__intro { margin-inline: auto; text-align: center; }
.cc-cs-wrap--center .cc-cs__media { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.cc-cs-wrap--center .cc-cs-block--full { flex: 0 0 100%; max-width: 100%; }
.cc-cs-wrap--center .cc-cs-block--half { flex: 0 0 calc(50% - var(--cc-cs-gap) / 2); max-width: calc(50% - var(--cc-cs-gap) / 2); }
.cc-cs-wrap--center .cc-cs-block--third { flex: 0 0 calc(33.3333% - var(--cc-cs-gap) * 2 / 3); max-width: calc(33.3333% - var(--cc-cs-gap) * 2 / 3); }
.cc-cs-wrap--center .cc-cs-block figcaption { text-align: center; }
@media (max-width: 760px) {
  .cc-cs-wrap--center .cc-cs-block--half { flex-basis: 100%; max-width: 100%; }
  .cc-cs-wrap--center .cc-cs-block--third { flex-basis: calc(50% - var(--cc-cs-gap) / 2); max-width: calc(50% - var(--cc-cs-gap) / 2); }
}
@media (max-width: 480px) {
  .cc-cs-wrap--center .cc-cs-block--third { flex-basis: 100%; max-width: 100%; }
}