/* === STORIES - Google Web Stories Integration === */
.stories {
    padding: var(--space-8) 0;
}

.stories__header {
    margin-bottom: var(--space-4);
}

.stories__title {
    font-size: var(--text-xl);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Google Web Stories container - fullscreen on mobile */
.stories__container {
    position: relative;
    width: 100%;
    height: calc(100vh - var(--space-8));
    min-height: 600px;
    background: var(--color-gray-100);
    border-radius: 8px;
    overflow: hidden;
}

@media (min-width: 768px) {
    .stories__container {
        height: 600px;
        max-width: 400px;
    }
}

/* Placeholder for single latest story */
.story-single {
    width: 100%;
    height: 100%;
    position: relative;
    background: linear-gradient(135deg, var(--color-mana) 0%, var(--color-health) 100%);
}

.story-single__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-4);
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
    color: var(--color-white);
}

.story-single__title {
    font-size: var(--text-2xl);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.story-single__description {
    font-size: var(--text-base);
    opacity: 0.9;
}

/* Google Web Stories embed styles */
amp-story-player {
    width: 100%;
}

/* === Stories 9:16 / carousel wrapper === */
:root{ --ar-9x16: 56.25%; }
.ar{ position: relative; width: 100%; }
.ar--9x16{ aspect-ratio: 9 / 16; }
.ar--9x16::before{ content:""; display:block; padding-top: var(--ar-9x16); }
.ar > .stories__player{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; border-radius:inherit; }

.stories__placeholder{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: var(--space-3, 12px);
  background: linear-gradient(135deg, rgba(0,0,0,.04), rgba(0,0,0,.02));
  border-radius: inherit;
  text-align:center;
}

/* === Stories 9:16 / AMP player wrapper === */
:root{ --ar-9x16: 56.25%; }
.ar{ position: relative; width: 100%; }
.ar--9x16{ aspect-ratio: 9 / 16; }
.ar--9x16::before{ content:""; display:block; padding-top: var(--ar-9x16); }
.ar > .stories__player{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; border-radius:inherit; }
.stories__placeholder{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: var(--space-3,12px);
  background: linear-gradient(135deg, rgba(0,0,0,.04), rgba(0,0,0,.02));
  border-radius: inherit; text-align:center;
}

/* === AMP player sizing fallback === */
.stories__viewport{ min-height:320px; }
@media (min-width:768px){
  .stories__viewport{ min-height:540px; }
}
.stories__viewport .stories__player{ display:block; width:100%; height:100%; }

/* AMPDBG overlay tweaks */
#amp-debug{ backdrop-filter: blur(2px); }

/* === Stories: responsive player sizing (portrait 9:16) === */
.stories__viewport-min{
  padding: 8px 0;
  display:flex;
  justify-content:center;
}

.stories__player{
  display:block;
  width:min(92vw, 600px);
  aspect-ratio: 9 / 16;
  min-height:360px;
  border-radius:16px;
  overflow:hidden;
}

@media (min-width: 768px){
  .stories__player{
    width:min(70vw, 560px);
  }
}

@media (min-width: 1200px){
  .stories__player{
    width:min(38vw, 640px);
  }
}

.stories {
  position: relative;
}

.story-cover {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.story-cover .story-single__content {
  position: relative;
  background: linear-gradient(180deg, rgba(0,0,0,0.65), rgba(0,0,0,0));
  padding: var(--space-5);
}

:root { --ar-9x16: 9 / 16; }

.ar {
  position: relative;
  width: 100%;
}

.ar::before {
  content: "";
  display: block;
  padding-top: var(--ar-fallback, 0);
}

.ar--9x16 {
  --ar-fallback: calc(16 / 9 * 100%);
  aspect-ratio: var(--ar-9x16);
}

.stories .stories__inner {
  max-width: var(--container-xl, 1120px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-block: var(--space-6, 24px);
  gap: var(--space-4, 16px);
}

.stories .stories__viewport {
  width: min(90vw, 720px);
  margin: 0 auto;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  background: var(--color-surface, #fff);
  position: relative;
}

.stories .stories__frame {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  border: 0;
  border-radius: inherit;
}

.stories .stories__frame iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
}

@media (min-width: 1024px) {
  .stories .stories__viewport {
    width: clamp(420px, 46vw, 760px);
  }
}

.stories .story-cover,
.stories .stories-embed,
.stories img.story-cover {
  display: none !important;
  height: auto !important;
  aspect-ratio: auto !important;
  padding-top: 0 !important;
  float: none !important;
}