/* ==========================================================================
   The Trend Collection — Elementor widget styles
   Reuses the theme's design tokens as CSS var() with hardcoded fallbacks,
   so widgets stay on-brand even if the active theme is ever swapped.
   ========================================================================== */

/* ---------------- Page Header ---------------- */
.ttc-page-header {
  text-align: center;
}
.ttc-page-header__eyebrow {
  display: block;
  margin-bottom: .75rem;
}
.ttc-page-header__heading {
  margin: 0 0 .75rem;
}
.ttc-page-header__lede {
  margin: 0 auto;
}

/* ---------------- Narrative Split ---------------- */
.ttc-narrative {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .ttc-narrative { grid-template-columns: 1fr 1fr; }
}

.ttc-narrative__col { min-width: 0; width: 100%; max-width: 100%; }
.ttc-narrative__col--image { order: 1; }
.ttc-narrative__col--text { order: 2; margin-top: 1.5rem; }
@media (min-width: 1024px) {
  .ttc-narrative__col--text { margin-top: 0; }
  .ttc-narrative--flip .ttc-narrative__col--image { order: 2; }
  .ttc-narrative--flip .ttc-narrative__col--text { order: 1; }
}

.ttc-narrative__image {
  position: relative;
  width: 100%;
  aspect-ratio: 16/11;
  overflow: hidden;
  background: var(--bg, #F8F4EE);
}
/* Equal-height split only applies once the columns sit side by side — on a
   single mobile column there is no sibling to match, so aspect-ratio (set
   above, and by the Style tab's Aspect Ratio control) governs the image's
   height there instead. At this breakpoint the grid stretches both columns
   to the row's height, which becomes a definite containing-block height, so
   an explicit height here simply wins over aspect-ratio (both width and
   height are then definite, leaving nothing for aspect-ratio to compute). */
@media (min-width: 1024px) {
  .ttc-narrative__image { height: 100%; }
}
.ttc-narrative__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ttc-narrative__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  height: 100%;
}
.ttc-narrative__eyebrow { display: block; }
.ttc-narrative__heading { margin: 0; }
.ttc-narrative__body { display: flex; flex-direction: column; gap: 1rem; }
.ttc-narrative__body p { margin: 0; }
.ttc-narrative__body strong { font-weight: 700; }

/* ---------------- Guiding Principles ---------------- */
.ttc-principles { width: 100%; }
.ttc-principles__head { text-align: center; }
.ttc-principles__heading { margin: 0; }

.ttc-principles__grid {
  --ttc-principles-cols: 3;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .ttc-principles__grid { grid-template-columns: repeat( var(--ttc-principles-cols), 1fr ); }
}

.ttc-principle-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color .3s ease;
  width: 100%;
  max-width: 100%;
}
.ttc-principle-card__eyebrow { display: block; margin-bottom: .75rem; }
.ttc-principle-card__title { margin: 0 0 .75rem; }
.ttc-principle-card__desc { margin: 0; }

/* ==========================================================================
   Homepage widgets
   ========================================================================== */

/* ---------------- Hero ---------------- */
.ttc-hero {
  position: relative;
  width: 100%;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #2B2522;
}
.ttc-hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.02);
}
.ttc-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--ttc-hero-overlay-bottom, #2B2522) 0%, var(--ttc-hero-overlay-top, rgba(43,37,34,.4)) 100%);
}
.ttc-hero__content {
  position: relative; z-index: 1;
  max-width: 800px; margin: 0 auto;
  padding: 5rem 1.5rem;
  text-align: center;
}
.ttc-hero__badge {
  display: inline-block;
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .25em;
  padding: .375rem .875rem; border-radius: 2px; margin-bottom: 1.25rem;
}
.ttc-hero__title { margin: 0 0 1.5rem; text-wrap: balance; }
.ttc-hero__desc { max-width: 640px; margin: 0 auto 2rem; }
.ttc-hero__button {
  display: inline-flex; align-items: center; gap: .75rem;
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .2em;
  padding: .9rem 2rem; border-radius: 8px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ttc-hero__button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(0,0,0,.4); }
.ttc-hero--empty { display: flex; align-items: center; justify-content: center; min-height: 200px; color: #fff; }

/* ---------------- Category section head (shared by grid + split) ---------------- */
.ttc-cat-section { width: 100%; }
.ttc-cat-section__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 1rem; margin-bottom: 2rem;
  border-bottom: 1px solid rgba(43,37,34,.15);
}
.ttc-cat-section__heading { margin: 0; }
.ttc-cat-section__viewall {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  transition: opacity .2s ease;
}
.ttc-cat-section__viewall:hover { opacity: .75; }
.ttc-cat-section__viewall svg { transition: transform .2s ease; }
.ttc-cat-section__viewall:hover svg { transform: translateX(3px); }
.ttc-cat-section__empty { text-align: center; padding: 2rem 0; color: rgba(43,37,34,.6); }

/* ---------------- Category grid (Fashion / Beauty / Tech / Lifestyle) ---------------- */
.ttc-cat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 640px) {
  .ttc-cat-grid { grid-template-columns: repeat( min( var(--ttc-cat-cols, 2), 2 ), 1fr ); }
}
@media (min-width: 1024px) {
  .ttc-cat-grid { grid-template-columns: repeat( var(--ttc-cat-cols, 2), 1fr ); }
}

.ttc-cat-card {
  display: block;
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
  width: 100%; max-width: 100%;
}
.ttc-cat-card a { display: flex; flex-direction: column; height: 100%; }

.ttc-cat-card--bleed .ttc-cat-card__media { aspect-ratio: var(--ttc-cat-ratio, 16/10); background: var(--bg, #F8F4EE); }
.ttc-cat-card--bleed .ttc-cat-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.ttc-cat-card--bleed:hover .ttc-cat-card__media img { transform: scale(1.05); }

.ttc-cat-card--padded { padding: 1rem; }
.ttc-cat-card--padded .ttc-cat-card__media { aspect-ratio: var(--ttc-cat-ratio, 1/1); border-radius: 6px; overflow: hidden; margin-bottom: 1rem; background: var(--bg, #F8F4EE); }
.ttc-cat-card--padded .ttc-cat-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.ttc-cat-card--padded:hover .ttc-cat-card__media img { transform: scale(1.05); }
.ttc-cat-card--padded .ttc-cat-card__body { padding: 0 !important; }

.ttc-cat-card__media { position: relative; }
.ttc-cat-card__badge {
  display: inline-block; width: fit-content;
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em;
  padding: .2rem .625rem; border-radius: 2px; margin-bottom: .75rem;
}
.ttc-cat-card__badge--overlay { position: absolute; top: .75rem; left: .75rem; margin-bottom: 0; }
.ttc-cat-card__body { display: flex; flex-direction: column; flex-grow: 1; }
.ttc-cat-card__title { margin: 0 0 .625rem; transition: color .2s ease; }
.ttc-cat-card a:hover .ttc-cat-card__title { color: var(--accent, #6B2638); }
.ttc-cat-card__excerpt { margin: 0 0 1rem; line-height: 1.6; }
.ttc-cat-card__readmore {
  display: inline-flex; align-items: center; gap: .375rem; margin-top: auto; padding-top: .25rem;
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  text-decoration: underline; text-underline-offset: 4px;
}

/* ---------------- Category split (Travel) ---------------- */
.ttc-split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .ttc-split-grid { grid-template-columns: repeat(2, 1fr); }
}

.ttc-split-card { overflow: hidden; transition: border-color .3s ease, box-shadow .3s ease; }
.ttc-split-card a { display: flex; flex-direction: column; height: 100%; }
@media (min-width: 640px) {
  .ttc-split-card a { flex-direction: row; }
}
.ttc-split-card__media { position: relative; flex-shrink: 0; flex-basis: 40%; aspect-ratio: 16/10; overflow: hidden; background: var(--bg, #F8F4EE); }
@media (min-width: 640px) { .ttc-split-card__media { aspect-ratio: auto; } }
.ttc-split-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.ttc-split-card:hover .ttc-split-card__media img { transform: scale(1.05); }
.ttc-split-card__badge {
  position: absolute; top: .75rem; left: .75rem;
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em;
  padding: .2rem .625rem; border-radius: 2px;
}
.ttc-split-card__body { display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; padding: 1.5rem; gap: 1rem; }
.ttc-split-card__title { margin: 0 0 .5rem; transition: color .2s ease; }
.ttc-split-card a:hover .ttc-split-card__title { color: var(--accent, #6B2638); }
.ttc-split-card__excerpt { margin: 0; line-height: 1.6; }
.ttc-split-card__readmore {
  display: inline-flex; align-items: center; gap: .375rem; margin-top: auto;
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  text-decoration: underline; text-underline-offset: 4px;
}