/* BarkShop — homepage (front page only). Sections are block patterns in patterns/. */

/* The page is a stack of full-width sections on one grid: every direct child of the content
   is centred at the shared content width with the shared gutter, whatever block wrapped it. */
.home .entry-content {
    padding: 0 var(--bark-gutter);
    box-sizing: border-box;
}
/* Astra's full-width layout resets the block width with
   `.ast-page-builder-template .entry-content[data-ast-blocks-layout] > *`; the attribute
   selector here matches that specificity and loads later. */
.home .entry-content > *,
.home .entry-content[data-ast-blocks-layout] > * {
    max-width: var(--bark-content-width);
    margin-left: auto;
    margin-right: auto;
}
/* Astra pads every block group by 3em and every list by 20px; on this page the sections set
   their own spacing, so the text of each section starts on the same grid line. */
.home .entry-content .wp-block-group { padding-left: 0; padding-right: 0; }
.home .entry-content .bark-tiles,
.home .entry-content .bark-trustbar,
.home .entry-content .bark-hero-facts { padding-left: 0; }
.home .entry-content .bark-tiles,
.home .entry-content .bark-hero-facts { margin-left: 0; margin-right: 0; }
/* .bark-band and the default .bark-section padding live in base.css: the info pages use them too. */
.home .wp-block-heading { color: var(--bark-ink); }
.home .entry-content .bark-section { padding: 2.5rem 0 1.5rem; }
.bark-section-head { max-width: 640px; margin: 0 0 1.4rem; }
.bark-section-head p { color: var(--bark-muted); margin: 0; }

/* Hero: copy left, the real shop photo right in an arched frame, on a cream band that runs
   edge to edge (mockup: 1.08fr / .92fr, photo 490px tall). */
.home .entry-content .bark-hero {
    padding: 2.875rem 0 2rem;
    margin-top: 0;
}
.bark-hero-columns { gap: 2.4rem; align-items: center; }
.home .entry-content .bark-hero h1 {
    max-width: 700px;
    margin: 0;
    color: var(--bark-ink);
    font-size: clamp(2.75rem, 6vw, 4.875rem);
    letter-spacing: -.04em;
    line-height: .98;
}
.bark-hero .bark-lead { max-width: 610px; margin: 1.4rem 0 1.75rem; color: var(--bark-lead); }
.bark-hero .wp-block-buttons { margin-bottom: 1.9rem; gap: .75rem; }
.bark-hero-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.1rem;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--bark-muted);
}
.bark-hero-facts li { margin: 0; display: flex; align-items: center; gap: .45rem; }
.bark-hero-facts li::before {
    content: "✓";
    display: inline-grid;
    width: 20px;
    height: 20px;
    place-items: center;
    background: var(--bark-paper);
    color: var(--bark-primary);
    border-radius: 50%;
    font-size: .75rem;
}
.bark-hero-photo { margin: 0 0 0 3.4rem; }
/* The whole square photo, never cropped: the arch only rounds the top corners (shelves). */
.bark-hero-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 48% 48% 24px 24px;
    box-shadow: var(--bark-shadow);
    display: block;
}
@media (max-width: 781px) {
    .home .entry-content .bark-hero { padding: 1.5rem 0 1.75rem; }
    .bark-hero-columns { flex-direction: column; }
    .bark-hero-photo { margin: 0; }
    .bark-hero .wp-block-buttons .wp-block-button { width: 100%; }
    .bark-hero .wp-block-buttons .wp-block-button__link { width: 100%; text-align: center; }
    .bark-hero-facts { flex-direction: column; }
}

/* Section head: heading left, one line of explanation right (stacked on phones). */
.bark-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.9rem;
    max-width: none;
    margin: 0 0 1.6rem;
}
.bark-section-head > div { min-width: 0; }
.home .entry-content .bark-section-head h2,
.home .entry-content .bark-advice h2 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; }
.bark-section-head p { max-width: 490px; margin: 0; color: var(--bark-muted); }
@media (max-width: 781px) {
    .bark-section-head { flex-direction: column; align-items: flex-start; gap: .6rem; }
}

/* Trust strip: four equal cells on the grid, a bold value and its label (mockup "proof"). */
.bark-trustbar {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;   /* every cell the same height, whatever its text */
    gap: .75rem;
}
/* Astra's `.entry-content[data-ast-blocks-layout] > :not(.wp-block-group) > *` auto margins would shrink a grid cell to its text. */
.home .entry-content[data-ast-blocks-layout] .bark-trustbar li,
.bark-trustbar li {
    margin: 0;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--bark-border);
    border-radius: var(--bark-radius-card);
    background: var(--bark-paper);
}
/* One-word heading on one line, description right under it: text starts at the same height in
   every cell. */
.bark-trustbar strong {
    display: block;
    white-space: nowrap;
    font-family: var(--bark-font-display);
    font-size: 1.25rem;
    color: var(--bark-ink);
    margin-bottom: .2rem;
}
.bark-trustbar span { display: block; color: var(--bark-muted); font-size: .8125rem; line-height: 1.4; }
@media (max-width: 921px) { .bark-trustbar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) {
    .bark-trustbar { gap: .5rem; }
    .bark-trustbar li { padding: .8rem .9rem; }
    .bark-trustbar strong { font-size: 1.05rem; }
    .bark-trustbar span { font-size: .75rem; }
}

/* Category tiles (inc/navigation.php): coloured cards, the first one large (mockup "needs"). */
.bark-tiles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1.15fr .85fr .85fr;
    grid-auto-rows: 220px;
    gap: 1rem;
}
.bark-tile { margin: 0; }
.bark-tile:first-child { grid-row: span 2; }
.bark-tile a {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding: 1.5rem;
    border-radius: var(--bark-radius-large);
    text-decoration: none;
    color: var(--bark-ink);
    box-sizing: border-box;
    transition: transform .15s ease, box-shadow .15s ease;
}
.bark-tile a:hover { transform: translateY(-3px); box-shadow: var(--bark-shadow); }
.bark-tile a:hover .bark-tile-title { text-decoration: underline; text-underline-offset: 4px; }
.bark-tile-icon {
    position: absolute;
    top: 18px;
    right: 20px;
    font-size: 54px;
    line-height: 1;
    filter: saturate(.8);
}
.bark-tile:first-child .bark-tile-icon { top: 42px; right: 38px; font-size: 120px; }
.bark-tile-count {
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.bark-tile-title {
    max-width: 350px;
    margin: .5rem 0 0;
    font-family: var(--bark-font-display);
    font-weight: 700;
    font-size: 1.625rem;
    line-height: 1.05;
}
.bark-tile:first-child .bark-tile-title { font-size: 2.625rem; }
.bark-tile-children { margin-top: .875rem; font-size: .8125rem; font-weight: 700; }
/* Tones: pine with white text, then cream, sun and terracotta with ink text (all AA). */
.bark-tile--1 a { background: var(--bark-primary); color: var(--bark-on-primary); }
.bark-tile--2 a { background: var(--bark-surface); }
.bark-tile--3 a { background: var(--bark-sun); }
.bark-tile--4 a { background: var(--bark-accent); }
@media (max-width: 781px) {
    .bark-tiles { grid-template-columns: 1fr 1fr; grid-auto-rows: 190px; }
    .bark-tile:first-child { grid-column: span 2; grid-row: auto; }
    .bark-tile:first-child .bark-tile-title { font-size: 2.125rem; }
    .bark-tile a { padding: 1.1rem; }
    .bark-tile-title { font-size: 1.25rem; }
    .bark-tile-icon { font-size: 40px; top: 14px; right: 14px; }
    .bark-tile:first-child .bark-tile-icon { font-size: 72px; top: 20px; right: 24px; }
    /* Small tiles keep count and name only; the subcategories are one tap away. */
    .bark-tile:not(:first-child) .bark-tile-children { display: none; }
}

/* Product rows: the shop loop ([products] shortcode), so the cards are the ones from the shop
   with the unit price and every legal notice; four per row on desktop, two on phones. */
.home .entry-content .woocommerce ul.products { margin: 0; }

/* Advice: pine card on the grid, white text, the human contact as the call to action. */
.home .entry-content .bark-advice {
    background: var(--bark-primary);
    color: var(--bark-on-primary);
    border-radius: var(--bark-radius-large);
    padding: 2.5rem 2.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}
@media (max-width: 600px) {
    .home .entry-content .bark-advice { padding: 1.6rem 1.2rem; }
}
.bark-advice .bark-eyebrow { color: var(--bark-sun); }
.bark-advice h2.wp-block-heading,
.bark-advice p { color: var(--bark-on-primary); }
.home .entry-content .bark-advice h2 { margin-bottom: .8rem; }
.bark-advice .bark-lead { opacity: .92; max-width: 640px; }
.bark-advice .wp-block-button__link {
    background-color: var(--bark-sun);
    color: var(--bark-ink);
}
.bark-advice .wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    color: var(--bark-on-primary);
    border-color: var(--bark-on-primary);
}
.bark-advice .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--bark-on-primary);
    color: var(--bark-primary);
}

/* 3D showcase: two decks side by side, cards swapping in 3D (assets/js/showcase.js). */
/* Right under the hero, big: the two decks fill the content width. */
.home .entry-content .bark-showcase {
    display: flex;
    gap: 2.5rem;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 2.5rem auto 1rem;
    padding: 0;
}
.bark-deck { flex: 1 1 440px; max-width: 600px; }
.bark-deck-label {
    text-align: center;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    margin: 0 0 1rem;
    color: var(--bark-ink);
}
/* The stage is exactly as tall as the front card (cards are absolute, so the stage needs its
   own height): card width share x the card's portrait ratio. No fixed height, no gap below. */
.bark-deck-stage {
    --bark-card-width-share: .62;
    --bark-card-height-ratio: 1.25; /* 4 / 5 portrait cards */
    position: relative;
    aspect-ratio: 1 / calc(var(--bark-card-width-share) * var(--bark-card-height-ratio));
    perspective: 1300px;
    transform-style: preserve-3d;
}
.bark-card {
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(var(--bark-card-width-share) * 100%);
    aspect-ratio: 4 / 5;
    margin-left: calc(var(--bark-card-width-share) * -50%);
    border-radius: var(--bark-radius-large);
    overflow: hidden;
    background: var(--bark-surface);
    box-shadow: var(--bark-shadow);
    transition: transform .9s cubic-bezier(.22, .68, .24, 1), opacity .9s ease;
    transform-style: preserve-3d;
    text-decoration: none;
}
/* Only the three cards on stage are promoted to their own layer; a deck can hold a dozen. */
.bark-card[data-pos="0"],
.bark-card[data-pos="1"],
.bark-card[data-pos="2"] { will-change: transform, opacity; }
.bark-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Stack positions (the script sets data-pos 0..2; 0 = front). */
.bark-card[data-pos="0"] { transform: translateX(0)    translateZ(60px)   rotateY(0deg)   scale(1);   z-index: 3; opacity: 1; }
.bark-card[data-pos="1"] { transform: translateX(26%)  translateZ(-70px)  rotateY(-26deg) scale(.86); z-index: 2; opacity: .78; }
.bark-card[data-pos="2"] { transform: translateX(-26%) translateZ(-130px) rotateY(26deg)  scale(.78); z-index: 1; opacity: .55; }
/* More than three cards per deck: the rest wait behind until the carousel cycles them forward. */
.bark-card[data-pos]:not([data-pos="0"]):not([data-pos="1"]):not([data-pos="2"]) {
    transform: translateZ(-180px) scale(.7);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}
@media (max-width: 600px) {
    .bark-deck-stage { --bark-card-width-share: .74; }
}
/* People who asked for less motion get a still stack. */
@media (prefers-reduced-motion: reduce) {
    .bark-card { transition: none; }
}