/* V7 — shared reflow hardening.
   Owns only cross-family fixes discovered by the WCAG reflow/text-spacing gate.
   Do not use this file as a generic overflow-hiding layer: every rule below
   preserves content and changes the responsible shared component. */

/* Home masthead: the logo width used viewport units while the avatar and gap
   occupied additional inline space. At 200% zoom this could push the avatar
   6–11 CSS px outside the viewport even though every individual asset looked
   correctly sized. Constrain the image by the actual flex row, not viewport
   width alone. */
@media (max-width:899px){
  html.v1[data-lrb-home="true"] .masthead__brand-row{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  html.v1[data-lrb-home="true"] .masthead__logo-image{
    min-width:0;
    flex:1 1 auto;
    max-width:calc(100% - clamp(52px,7vw,92px) - clamp(.6rem,1.6vw,1.1rem));
  }
}

/* Context navigation: on phones the component previously relied on one
   horizontally scrollable, nowrap row. Under 200% zoom + WCAG text spacing,
   that produced content hundreds of CSS px outside the viewport on Samuel,
   Fragmento and Noveris. Navigation labels do not intrinsically require a
   two-dimensional layout, so the narrow form reflows instead of hiding or
   clipping them. The bar also stops being sticky once it can occupy several
   rows, avoiding a large persistent viewport obstruction. */
@media (max-width:639px){
  html.v1:not([data-lrb-home="true"]){
    scroll-padding-top:calc(var(--dp-lrb-utility-h,54px) + 12px);
  }
  html.v1 .section-context{
    position:relative;
    top:auto;
  }
  html.v1 .section-context__inner{
    min-width:0;
    /* Base layout (assets/v1-editorial-interior-v4.css) is a 2-column grid,
       `auto minmax(0,1fr)` -- title column sized to its own content, links
       column takes the rest. min-width:0 alone only lets the *links* column
       shrink; the title's `auto` track never does, so a long title (e.g.
       "Samuel entre mundos") at 200% zoom can by itself claim close to the
       full viewport width, leaving ~0px for links and pushing their wrapped
       content out the right edge (confirmed on libros/samuel-entre-mundos/,
       universo/noveris/ and clubes-de-lectura/samuel-entre-mundos/ alike --
       this was never page-specific). Stacking to one column removes the
       competition entirely instead of trying to out-shrink an auto track.
       Sitewide reflow QA is what caught the width fix already covered
       here for the wrong root cause; this is the actual missing piece. */
    grid-template-columns:minmax(0,1fr);
  }
  html.v1 .section-context__title{
    min-width:0;
    white-space:normal;
    overflow-wrap:anywhere;
    line-height:1.2;
    border-right:0;
    padding:.5rem 0 0;
    margin-right:0;
  }
  html.v1 .section-context__links{
    min-width:0;
    flex-wrap:wrap;
    overflow-x:visible;
    overscroll-behavior-inline:auto;
  }
  html.v1 .section-context__links a{
    min-width:0;
    white-space:normal;
    overflow-wrap:anywhere;
    line-height:1.25;
    padding-block:.5rem;
  }
}

/* Footer social row: .text-action is display:inline-flex, and as a flex
   child of .social-row its default min-width:auto floors it at its content's
   min-content width -- normally invisible, but at 200% zoom + WCAG text
   spacing "Goodreads" alone measured 315px, wider than the row itself,
   pushing it ~27px past the viewport on every page's footer. min-width:0
   lets it size down; flex-wrap lets the trailing arrow (a second flex item,
   same shape as .yale-text-link below) drop under the label instead of
   trailing off past the edge once the label itself has shrunk. */
html.v1 .social-row .text-action{min-width:0;flex-wrap:wrap}

/* Home intro overlay: .intro__enter is centered via left:50% + a negative
   translate, so its own width (driven by 3rem of horizontal padding plus
   WCAG text-spacing widening "ENTRAR") grows symmetrically past both edges
   of a narrow viewport at 200% zoom, even though it looks centered. Cut the
   padding at the one width where that matters -- the button's fixed
   position and pill shape are otherwise unaffected. The extra attribute
   selector isn't decorative: v1-home.css defines the base rule and loads
   after this file (imported from v1-shell.css, itself before v1-home.css
   in every page's <link> order), so at equal specificity it would
   otherwise win regardless of this media query matching. */
@media (max-width:399px){
  html.v1[data-lrb-home="true"] .intro__enter{padding-inline:1.2rem}
}

/* Section-head "see all" links: .yale-text-link is inline-flex with the
   trailing arrow as a second flex item (nowrap by default), so it never
   drops below the label even once the label's own text has wrapped to two
   lines to fit -- at 200% zoom + WCAG text spacing the arrow then sits to
   the right of whichever wrapped line is longest, past the viewport edge.
   Letting the flex line wrap puts the arrow on its own row when needed. */
html.v1[data-lrb-home="true"] .yale-text-link{flex-wrap:wrap}

/* Sitemap directory group labels: "01 Orientación"-style headers use
   justify-content:space-between with no min-width:0 on either span, so the
   category name doesn't shrink and, being a single word, can't wrap either
   -- at 200% zoom + WCAG text spacing it ran past the row's own edge. */
html.v1 [data-family="findability"] .directory-group__label{flex-wrap:wrap}
html.v1 [data-family="findability"] .directory-group__label span{min-width:0;overflow-wrap:anywhere}