/*
|--------------------------------------------------------------------------
| Dynaweb Framework Core
|--------------------------------------------------------------------------
|
| Destination-neutral design tokens and reusable frontend foundations.
|
| Core defines structure, rhythm and behaviour.
| Destination and feature styles define visual personality.
|
*/

/*
 * --------------------------------------------------------------------------
 * Design Tokens
 * --------------------------------------------------------------------------
 */

:root {
  /*
   * Colour
   * ------------------------------------------------------------------------
   *
   * Neutral framework defaults only.
   *
   * Destination themes may override these values, but reusable layout
   * primitives must never depend on destination-specific colours.
   */

  --dw-color-paper: #f8f7f3;
  --dw-color-surface: #fff;

  --dw-color-ink: #202020;
  --dw-color-text: #303030;

  --dw-color-muted: #6d6d6d;
  --dw-color-subtle: #999;

  --dw-color-border: #e8e6e1;

  --dw-color-accent: #9b6b4a;

  /*
 * Destination presentation contracts.
 *
 * These are deliberately neutral defaults. A destination theme may
 * override them without requiring feature stylesheets to know which
 * destination is active.
 */

  --dw-theme-surface-deep: var(--dw-color-border);

  --dw-theme-accent: var(--dw-color-accent);
  --dw-theme-accent-deep: var(--dw-color-accent);

  --dw-theme-secondary: var(--dw-color-muted);

  --dw-theme-on-image: #fff;
  --dw-theme-on-image-soft: rgba(255, 255, 255, 0.92);
  --dw-theme-on-image-rule: rgba(255, 255, 255, 0.7);

  --dw-theme-hero-overlay-side: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0) 58%
  );

  --dw-theme-hero-overlay-bottom: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.42) 32%,
    rgba(0, 0, 0, 0.1) 66%,
    rgba(0, 0, 0, 0) 100%
  );

  --dw-theme-accent-wash: transparent;
  --dw-theme-surface-wash: transparent;
  --dw-theme-surface-deep-wash: transparent;
  --dw-theme-section-wash: transparent;
  --dw-theme-section-wash-soft: transparent;

  --dw-theme-media-hairline: rgba(0, 0, 0, 0.08);
  --dw-theme-pagination-border: var(--dw-color-border);

  --dw-theme-card-shadow: var(--dw-shadow-soft);

  --dw-theme-archive-image-scale-hover: 1.01;

  /*
 * Destination editorial personality.
 */

  --dw-theme-heading-weight: 400;
  --dw-theme-heading-tracking: -0.01em;

  --dw-theme-eyebrow-weight: 600;
  --dw-theme-eyebrow-tracking: 0.12em;

  --dw-theme-hero-image-filter: none;
  --dw-theme-card-image-filter: none;
  --dw-theme-card-image-filter-hover: none;

  --dw-theme-card-image-scale: 1;
  --dw-theme-card-image-scale-hover: 1.02;

  --dw-theme-related-stagger: 0;
  --dw-theme-editorial-radius: 0;

  /*
   * Typography
   * ------------------------------------------------------------------------
   */

  --dw-font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;

  --dw-font-body: Georgia, "Iowan Old Style", "Times New Roman", serif;

  --dw-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /*
   * Content Widths
   * ------------------------------------------------------------------------
   */

  --dw-width-wide: 1200px;
  --dw-width-content: 720px;
  --dw-width-narrow: 560px;

  /*
   * Backwards-compatible aliases.
   *
   * Existing feature CSS currently consumes these names. Keep them until
   * individual features are migrated onto the layout system.
   */

  --dw-container: var(--dw-width-wide);
  --dw-content: var(--dw-width-content);

  /*
   * Responsive Gutters
   * ------------------------------------------------------------------------
   */

  --dw-gutter: 1rem;

  /*
   * Spacing
   * ------------------------------------------------------------------------
   */

  --dw-space-xs: 0.5rem;
  --dw-space-sm: 1rem;
  --dw-space-md: 2rem;
  --dw-space-lg: 4rem;
  --dw-space-xl: 6rem;
  --dw-space-2xl: 8rem;

  /*
   * Shape
   * ------------------------------------------------------------------------
   */

  --dw-radius-sm: 8px;
  --dw-radius-md: 12px;
  --dw-radius-lg: 16px;

  /*
   * Elevation
   * ------------------------------------------------------------------------
   */

  --dw-shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.08);

  --dw-shadow-card: 0 16px 40px rgba(0, 0, 0, 0.08);

  /*
   * Motion
   * ------------------------------------------------------------------------
   */

  --dw-duration-fast: 150ms;
  --dw-duration-normal: 250ms;
  --dw-duration-slow: 400ms;

  --dw-ease-standard: ease;

  --dw-ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);

  /*
   * Layering
   * ------------------------------------------------------------------------
   */

  --dw-z-base: 1;
  --dw-z-overlay: 10;
  --dw-z-header: 100;
  --dw-z-modal: 1000;
}

/*
|--------------------------------------------------------------------------
| Container
|--------------------------------------------------------------------------
|
| Controls horizontal page bounds.
|
| Consumer-defined custom property:
|
|   --dw-container-width
|
*/

.dw-container {
  --dw-container-width: var(--dw-width-wide);

  width: min(var(--dw-container-width), calc(100% - (var(--dw-gutter) * 2)));

  margin-inline: auto;
}

.dw-container--content {
  --dw-container-width: var(--dw-width-content);
}

.dw-container--narrow {
  --dw-container-width: var(--dw-width-narrow);
}

/*
 * Legacy content wrapper.
 *
 * Preserve while existing components still use .dw-content directly.
 */

.dw-content {
  width: min(var(--dw-width-content), calc(100% - (var(--dw-gutter) * 2)));

  margin-inline: auto;
}

/*
|--------------------------------------------------------------------------
| Stack
|--------------------------------------------------------------------------
|
| Vertical content flow with predictable spacing.
|
| Consumer-defined custom property:
|
|   --dw-stack-gap
|
*/

.dw-stack {
  display: flex;
  flex-direction: column;

  gap: var(--dw-stack-gap, var(--dw-space-md));
}

.dw-stack > * {
  min-width: 0;
}

/*
|--------------------------------------------------------------------------
| Cluster
|--------------------------------------------------------------------------
|
| Horizontal groups that wrap naturally.
|
| Useful for:
|
| - metadata
| - filters
| - buttons
| - taxonomy links
| - compact navigation
|
| Consumer-defined custom properties:
|
|   --dw-cluster-gap
|   --dw-cluster-align
|   --dw-cluster-justify
|
*/

.dw-cluster {
  display: flex;
  flex-wrap: wrap;

  align-items: var(--dw-cluster-align, center);
  justify-content: var(--dw-cluster-justify, flex-start);

  gap: var(--dw-cluster-gap, var(--dw-space-sm));
}

.dw-cluster > * {
  min-width: 0;
}

/*
|--------------------------------------------------------------------------
| Grid
|--------------------------------------------------------------------------
|
| General responsive grid primitive.
|
| Consumer-defined custom properties:
|
|   --dw-grid-columns
|   --dw-grid-gap
|
*/

.dw-grid {
  display: grid;

  grid-template-columns: repeat(var(--dw-grid-columns, 3), minmax(0, 1fr));

  gap: var(--dw-grid-gap, var(--dw-space-md));
}

.dw-grid > * {
  min-width: 0;
}

/*
|--------------------------------------------------------------------------
| Split
|--------------------------------------------------------------------------
|
| Two-part editorial layouts such as:
|
| - text + media
| - map + content
| - introduction + supporting content
|
| Consumer-defined custom properties:
|
|   --dw-split-first
|   --dw-split-second
|   --dw-split-gap
|   --dw-split-align
|
*/

.dw-split {
  display: grid;

  grid-template-columns:
    minmax(0, var(--dw-split-first, 1fr))
    minmax(0, var(--dw-split-second, 1fr));

  align-items: var(--dw-split-align, start);

  gap: var(--dw-split-gap, var(--dw-space-lg));
}

.dw-split > * {
  min-width: 0;
}

/*
|--------------------------------------------------------------------------
| Rail
|--------------------------------------------------------------------------
|
| Horizontal touch-friendly content rail.
|
| Provides structural scrolling behaviour only. Feature or destination
| styles decide card appearance and preferred item width.
|
| Consumer-defined custom properties:
|
|   --dw-rail-gap
|   --dw-rail-item-width
|
*/

.dw-rail {
  display: flex;
  align-items: flex-start;

  width: 100%;
  max-width: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  gap: var(--dw-rail-gap, var(--dw-space-sm));

  scroll-snap-type: x mandatory;

  scrollbar-width: none;

  overscroll-behavior-x: contain;

  -webkit-overflow-scrolling: touch;
}

.dw-rail::-webkit-scrollbar {
  display: none;
}

.dw-rail > * {
  flex: 0 0 var(--dw-rail-item-width, 82%);

  width: var(--dw-rail-item-width, 82%);
  min-width: 0;

  scroll-snap-align: start;
}

/*
|--------------------------------------------------------------------------
| Section
|--------------------------------------------------------------------------
|
| Basic vertical section rhythm.
|
| More expressive editorial section behaviour belongs to the reusable
| component layer introduced later in milestone 9.
|
| Consumer-defined custom properties:
|
|   --dw-section-space-before
|   --dw-section-space-after
|
*/

.dw-section {
  margin-block: var(--dw-section-space-before, var(--dw-space-xl))
    var(--dw-section-space-after, var(--dw-space-xl));
}

/*
|--------------------------------------------------------------------------
| Editorial Section
|--------------------------------------------------------------------------
|
| Reusable section composition.
|
| .dw-section owns outer rhythm.
| .dw-section__inner owns optional internal spacing and surface treatment.
|
| Consumer-defined custom properties:
|
|   --dw-section-padding
|   --dw-section-background
|   --dw-section-border-color
|
*/

.dw-section__inner {
  padding-block: var(--dw-section-padding, 0);

  background: var(--dw-section-background, transparent);
}

.dw-section--divided {
  border-top: 1px solid var(--dw-section-border-color, var(--dw-color-border));
}

/*
|--------------------------------------------------------------------------
| Section Header
|--------------------------------------------------------------------------
|
| Editorial heading composition shared by destination features.
|
| Consumer-defined custom properties:
|
|   --dw-section-header-gap
|   --dw-section-header-max-width
|   --dw-section-header-title-size
|   --dw-section-header-intro-width
|
*/

.dw-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: var(--dw-section-header-gap, var(--dw-space-md));

  max-width: var(--dw-section-header-max-width, none);
}

.dw-section-header__body {
  min-width: 0;
}

.dw-section-header__eyebrow {
  display: block;

  margin-bottom: var(--dw-space-xs);

  color: var(--dw-color-muted);

  font-family: var(--dw-font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.dw-section-header__title {
  margin: 0;

  color: var(--dw-color-ink);

  font-family: var(--dw-font-display);

  font-size: var(--dw-section-header-title-size, clamp(1.7rem, 3vw, 2.4rem));

  font-weight: 400;
  line-height: 1.15;
}

.dw-section-header__intro {
  max-width: var(--dw-section-header-intro-width, 65ch);

  margin: var(--dw-space-sm) 0 0;

  color: var(--dw-color-text);

  font-family: var(--dw-font-body);
  line-height: 1.65;
}

.dw-section-header__action {
  flex: 0 0 auto;
}

/*
|--------------------------------------------------------------------------
| Media
|--------------------------------------------------------------------------
|
| Reusable image/media frame.
|
| Consumer-defined custom properties:
|
|   --dw-media-ratio
|   --dw-media-background
|   --dw-media-radius
|   --dw-media-object-fit
|   --dw-media-object-position
|
*/

.dw-media {
  position: relative;

  width: 100%;
  min-width: 0;

  overflow: hidden;

  aspect-ratio: var(--dw-media-ratio, 3 / 2);

  background: var(--dw-media-background, var(--dw-color-border));

  border-radius: var(--dw-media-radius, 0);
}

.dw-media img,
.dw-media picture,
.dw-media video {
  display: block;

  width: 100%;
  height: 100%;
}

.dw-media img,
.dw-media video {
  object-fit: var(--dw-media-object-fit, cover);

  object-position: var(--dw-media-object-position, center center);
}

.dw-media picture img {
  width: 100%;
  height: 100%;
}

/*
|--------------------------------------------------------------------------
| Card
|--------------------------------------------------------------------------
|
| Destination-neutral content card architecture.
|
| Cards provide structural composition only. Destination and feature
| styles remain responsible for visual personality.
|
| Recommended composition:
|
|   .dw-card
|     .dw-card__link
|       .dw-card__media
|         .dw-media
|       .dw-card__content
|         .dw-card__eyebrow
|         .dw-card__title
|         .dw-card__description
|         .dw-card__meta
|
| Consumer-defined custom properties:
|
|   --dw-card-background
|   --dw-card-border
|   --dw-card-radius
|   --dw-card-shadow
|   --dw-card-padding
|   --dw-card-gap
|   --dw-card-content-gap
|   --dw-card-title-size
|   --dw-card-media-width
|
*/

.dw-card {
  position: relative;

  min-width: 0;

  overflow: hidden;

  background: var(--dw-card-background, var(--dw-color-surface));

  border: var(--dw-card-border, 0);

  border-radius: var(--dw-card-radius, var(--dw-radius-md));

  box-shadow: var(--dw-card-shadow, var(--dw-shadow-soft));
}

/*
 * Full-card links remain block-level so cards work naturally inside
 * Grid and Rail primitives.
 */

.dw-card__link {
  display: flex;
  flex-direction: column;

  width: 100%;
  height: 100%;

  color: inherit;

  text-decoration: none;
}

/*
 * Media wrapper.
 *
 * The actual image behaviour belongs to .dw-media. This element merely
 * establishes the card's media slot.
 */

.dw-card__media {
  min-width: 0;

  overflow: hidden;
}

/*
 * Content body.
 */

.dw-card__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;

  min-width: 0;

  gap: var(--dw-card-content-gap, var(--dw-space-xs));

  padding: var(--dw-card-padding, var(--dw-space-md));
}

/*
 * Small contextual label such as category or content type.
 */

.dw-card__eyebrow {
  display: block;

  color: var(--dw-color-muted);

  font-family: var(--dw-font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

/*
 * Primary card heading.
 */

.dw-card__title {
  margin: 0;

  color: var(--dw-color-ink);

  font-family: var(--dw-font-display);

  font-size: var(--dw-card-title-size, clamp(1.3rem, 2vw, 1.7rem));

  font-weight: 400;
  line-height: 1.2;

  overflow-wrap: anywhere;
}

/*
 * Optional editorial summary.
 */

.dw-card__description {
  margin: 0;

  color: var(--dw-color-text);

  font-family: var(--dw-font-body);
  font-size: 0.95rem;
  line-height: 1.6;
}

/*
 * Metadata slot.
 *
 * .dw-meta remains responsible for the actual metadata layout.
 */

.dw-card__meta {
  margin-top: auto;

  padding-top: var(--dw-card-gap, var(--dw-space-xs));
}

/*
|--------------------------------------------------------------------------
| Plain Card
|--------------------------------------------------------------------------
|
| Removes framework surface decoration while retaining card composition.
|
| This is particularly useful for image-led editorial cards where the
| destination theme should own all visual treatment.
|
*/

.dw-card--plain {
  --dw-card-background: transparent;
  --dw-card-border: 0;
  --dw-card-radius: 0;
  --dw-card-shadow: none;
  --dw-card-padding: 0;
}

/*
|--------------------------------------------------------------------------
| Horizontal Card
|--------------------------------------------------------------------------
|
| Structural variant for media + content compositions.
|
*/

.dw-card--horizontal .dw-card__link {
  display: grid;

  grid-template-columns:
    minmax(0, var(--dw-card-media-width, 40%))
    minmax(0, 1fr);

  align-items: stretch;
}

.dw-card--horizontal .dw-card__media {
  height: 100%;
}

.dw-card--horizontal .dw-media {
  height: 100%;

  aspect-ratio: auto;
}

/*
|--------------------------------------------------------------------------
| Card Interaction
|--------------------------------------------------------------------------
|
| Core provides restrained interaction hooks only.
|
| Destination styles may override transforms, colours and media effects.
|
*/

.dw-card__link {
  transition: color var(--dw-duration-fast) var(--dw-ease-standard);
}

.dw-card__link:focus-visible {
  outline: 2px solid var(--dw-color-accent);

  outline-offset: 3px;
}

.dw-card__link:hover .dw-card__title {
  color: var(--dw-card-title-hover-color, currentColor);
}

/*
|--------------------------------------------------------------------------
| Editorial Primitives
|--------------------------------------------------------------------------
*/

.dw-eyebrow {
  display: inline-block;

  color: var(--dw-color-muted);

  font-family: var(--dw-font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.dw-section-title {
  margin: 0;

  color: var(--dw-color-ink);

  font-family: var(--dw-font-display);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 400;
  line-height: 1.2;
}

.dw-rule {
  width: 42px;
  height: 1px;

  margin-block: var(--dw-space-lg);

  background: var(--dw-color-border);
}

/*
|--------------------------------------------------------------------------
| Utility Primitives
|--------------------------------------------------------------------------
*/

.dw-text-muted {
  color: var(--dw-color-muted);
}

.dw-text-small {
  font-size: 0.875rem;
}

.dw-text-serif {
  font-family: var(--dw-font-body);
}

.dw-text-ui {
  font-family: var(--dw-font-ui);
}

.dw-link {
  color: inherit;

  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.dw-link:hover {
  text-decoration: underline;
}

/*
|--------------------------------------------------------------------------
| Accessibility
|--------------------------------------------------------------------------
*/

.dw-visually-hidden {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;
}

/*
 * Remove browser/theme focus decoration after mouse interaction while
 * preserving a visible focus state for keyboard navigation.
 */

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

.dw-media[data-focus="top-left"] {
  --dw-media-object-position: left top;
}

.dw-media[data-focus="top-center"] {
  --dw-media-object-position: center top;
}

.dw-media[data-focus="top-right"] {
  --dw-media-object-position: right top;
}

.dw-media[data-focus="center-left"] {
  --dw-media-object-position: left center;
}

.dw-media[data-focus="center-center"] {
  --dw-media-object-position: center center;
}

.dw-media[data-focus="center-right"] {
  --dw-media-object-position: right center;
}

.dw-media[data-focus="bottom-left"] {
  --dw-media-object-position: left bottom;
}

.dw-media[data-focus="bottom-center"] {
  --dw-media-object-position: center bottom;
}

.dw-media[data-focus="bottom-right"] {
  --dw-media-object-position: right bottom;
}

/*
|--------------------------------------------------------------------------
| Metadata
|--------------------------------------------------------------------------
|
| Compact contextual information such as:
|
| - destination
| - distance
| - category
| - price
| - rating
|
| Consumer-defined custom properties:
|
|   --dw-meta-gap
|   --dw-meta-color
|   --dw-meta-separator
|   --dw-meta-separator-color
|
*/

.dw-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: var(--dw-meta-gap, 0.4rem 0.75rem);

  color: var(--dw-meta-color, var(--dw-color-muted));

  font-family: var(--dw-font-ui);

  font-size: 0.75rem;
  line-height: 1.4;
}

.dw-meta__item {
  display: inline-flex;
  align-items: center;

  min-width: 0;
}

.dw-meta--separated .dw-meta__item + .dw-meta__item::before {
  content: var(--dw-meta-separator, "•");

  margin-right: 0.75rem;

  color: var(--dw-meta-separator-color, var(--dw-color-subtle));
}

/*
|--------------------------------------------------------------------------
| Pagination
|--------------------------------------------------------------------------
|
| Neutral pagination structure for archives and index views.
|
| WordPress-generated .page-numbers markup is supported directly.
|
| Consumer-defined custom properties:
|
|   --dw-pagination-gap
|   --dw-pagination-border
|   --dw-pagination-active-background
|   --dw-pagination-active-color
|
*/

.dw-pagination {
  margin-top: var(--dw-space-xl);
}

.dw-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: var(--dw-pagination-gap, var(--dw-space-xs));
}

.dw-pagination a,
.dw-pagination .current,
.dw-pagination .dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 2.5rem;
  min-height: 2.5rem;

  padding: 0.5rem 0.75rem;

  color: inherit;

  font-family: var(--dw-font-ui);
  font-size: 0.875rem;
  line-height: 1;

  text-decoration: none;

  border: 1px solid var(--dw-pagination-border, var(--dw-color-border));
}

.dw-pagination a {
  transition:
    border-color var(--dw-duration-fast) var(--dw-ease-standard),
    color var(--dw-duration-fast) var(--dw-ease-standard);
}

.dw-pagination a:hover {
  border-color: currentColor;
}

.dw-pagination .current {
  color: var(--dw-pagination-active-color, var(--dw-color-surface));

  background: var(--dw-pagination-active-background, var(--dw-color-ink));

  border-color: var(--dw-pagination-active-background, var(--dw-color-ink));
}

.dw-pagination .dots {
  border-color: transparent;
}

/*
|--------------------------------------------------------------------------
| Responsive Foundations
|--------------------------------------------------------------------------
*/

@media (max-width: 782px) {
  :root {
    --dw-gutter: 0.75rem;

    --dw-space-xl: 5rem;
    --dw-space-2xl: 6rem;
  }

  .dw-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .dw-section-header {
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .dw-section-header {
    flex-direction: column;
  }

  .dw-section-header__action {
    width: 100%;
  }

  .dw-pagination .nav-links {
    justify-content: flex-start;
  }

  .dw-card--horizontal .dw-card__link {
    grid-template-columns: minmax(0, 1fr);
  }

  .dw-card--horizontal .dw-media {
    height: auto;

    aspect-ratio: var(--dw-media-ratio, 3 / 2);
  }
}