/* Shared content pattern for Updates and Guides (Apple-like hierarchy without copying external CSS). */

.app-shell--updates {
    --app-shell-gap: var(--section-gap);
    --app-shell-bottom-padding: var(--section-gap);
}

.app-shell--updates :is(#updates-page, #guides-page, #guide-detail) > .content-container {
    --content-panel-shell-padding-x: clamp(18px, 2vw, 24px);
    --content-panel-shell-padding-y: clamp(18px, 2vw, 24px);
    --content-panel-shell-body-padding-top: var(--inner-gap);
}

.app-shell--updates :is(#updates-page, #guides-page, #guide-detail) > .section-head .section-head__summary {
    max-width: 62ch;
    --text-summary-size: clamp(15px, 1.1vw, 17px);
    --text-summary-line: 1.56;
}

.app-shell--updates #updates-page > .content-container > .content-body,
.app-shell--updates #guide-detail > .content-container > .content-body {
    --layout-stack-gap: clamp(14px, 1.8vw, 20px);
}

.app-shell--updates #guides-page > .content-container > .content-body {
    --layout-grid-min: var(--layout-grid-min-lg);
    --layout-grid-gap: clamp(12px, 1.4vw, 16px);
}

.app-shell--updates #guides-page .item-card {
    --item-card-padding: clamp(14px, 1.9vw, 20px);
}

.app-shell--updates #guides-page .item-card .text-summary {
    --text-summary-size: clamp(15px, 1.05vw, 16px);
    --text-summary-line: 1.58;
}

.app-shell--updates [data-content-entry] {
    --item-card-padding: clamp(15px, 1.9vw, 22px);
    --item-card-gap: clamp(10px, 1.3vw, 14px);
}

.app-shell--updates [data-content-entry] > .layout-stack > .text-title {
    max-width: 30ch;
}

.app-shell--updates [data-content-entry] > .layout-stack > .text-meta {
    --text-meta-track: normal;
    --text-meta-text-transform: none;
}

.app-shell--updates [data-content-entry-body] {
    --layout-stack-gap: clamp(10px, 1.1vw, 14px);
}

.app-shell--updates .content-block {
    max-width: 68ch;
}

.app-shell--updates .content-block + .content-block {
    padding-top: clamp(10px, 1.2vw, 14px);
    border-top: 1px solid color-mix(in srgb, var(--theme-border-normal) 62%, transparent);
}

.app-shell--updates .content-block .text-summary {
    --text-summary-size: clamp(16px, 1.1vw, 17px);
    --text-summary-line: 1.62;
    color: var(--theme-text-normal);
}

.app-shell--updates .content-block--list :is(.list-shell--bulleted, .list-shell--ordered) {
    margin: 0;
    --list-shell-gap: 7px;
    --list-shell-indent: 1.35em;
    color: var(--theme-text-normal);
    font-size: clamp(16px, 1.05vw, 17px);
    line-height: 1.6;
}

.app-shell--updates .content-block--list :is(.list-shell--bulleted, .list-shell--ordered) > li {
    margin: 0;
}

.app-shell--updates .content-block--list :is(.list-shell--bulleted, .list-shell--ordered) > li::marker {
    color: color-mix(in srgb, var(--theme-text-muted) 74%, var(--theme-text-strong));
}

.app-shell--updates .content-block--image,
.app-shell--updates .content-block--video {
    max-width: min(980px, 100%);
}

.app-shell--updates .content-block .content-media {
    display: grid;
    gap: clamp(8px, 1vw, 12px);
    width: min(980px, 100%);
    margin: 0 auto;
}

.app-shell--updates .content-block .content-media__frame {
    display: block;
    width: min(980px, 100%);
    margin-inline: auto;
    border-radius: var(--surface-radius);
    border: 1px solid color-mix(in srgb, var(--theme-border-normal) 84%, #fff);
    background: color-mix(in srgb, var(--theme-surface-subsection) 88%, #fff);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.app-shell--updates .content-block--image .content-media__frame > img {
    display: block;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
}

.app-shell--updates .content-block--video .content-media__frame > video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: #000;
}

.app-shell--updates .content-block .content-media__caption {
    --text-hint-margin: 0;
    max-width: 68ch;
}