@charset "UTF-8";
/*
 * Altnoy - project pages: listing card hover panel + detail page nav buttons
 * =====================================================================
 * One card markup, emitted by every listing shortcode in functions.php:
 *
 *   [project_featured]  [project_hold]  [project_all]   get_custom_project()
 *   [projectby]                                         projectcategory_shortcode()
 *   [green_project]                                     green_project_shortcode()
 *
 *   .project-col
 *     .project-image        the tile
 *     .project-title > h2   the black bar
 *     .project_description  the gold panel that opens on hover
 *       span                address
 *       hr.line-8
 *       p                   description
 *       .link-go > a        "לדף הפרוייקט" / "To the project page"
 *
 * THE BUG
 *   `.project_description` is `position:absolute; bottom:0; overflow:hidden`
 *   and `.project-col:hover` gives it `height:100%` - 100% of the CARD,
 *   which is the tile's `min-height` plus the title bar. The panel therefore
 *   has a fixed height that has nothing to do with how much text is in it,
 *   and `overflow:hidden` throws away whatever does not fit. The button is
 *   last, so the button is what goes.
 *
 *   It is invisible at the site's own type size - the longest description
 *   lands within a few px of the card height - and it fails as soon as the
 *   accessibility font steps push the type up. Measured on /פרויקטים/ with
 *   all 22 cards open:
 *
 *     step 140, 1400px   11 of 22 cropped, worst button 88px past the panel
 *     step 200, 1400px   16 of 22 cropped, worst 220px past the panel
 *     step 200, 375px    button not cropped (it is `position:absolute` below
 *                        768px) but 19 of 22 cards had text clipped away
 *                        with no way to reach it
 *
 * THE FIX
 *   1. The panel scrolls when, and only when, its content no longer fits.
 *      `overflow-y:auto` is a no-op while the text fits, so nothing changes
 *      at the site's own type size and the mouse wheel is not intercepted.
 *   2. The button is `position:sticky; bottom:0` with the panel's own
 *      background, so it stays on screen while the text scrolls behind it
 *      and can never be the part that is cut off.
 *   3. The panel's `padding-bottom` moves onto the button. A scroll
 *      container clips at its PADDING box, so text scrolls through the
 *      bottom padding and would show underneath the sticky button. Moving
 *      the space into the button means the button's own background covers
 *      the whole bottom strip. (A pseudo-element behind the button was the
 *      other option and it is worse: absolutely positioned children count
 *      towards scrollable overflow, which invented ~120px of phantom scroll
 *      on every card.)
 *   4. `margin-top:auto` in a column flexbox keeps the button pinned to the
 *      bottom of the panel, which is what `position:absolute; bottom:0`
 *      already did below 768px. Above 768px the button used to sit wherever
 *      the text ended, so buttons across a row were ragged; they now line
 *      up. See the note at the end if that is not wanted.
 *   5. `:focus-within` opens the panel for keyboard users. The card's link
 *      is focusable today while the panel is `height:0; opacity:0`, so
 *      tabbing through a listing lands on invisible links - WCAG 2.4.7.
 *
 * LOAD ORDER
 *   Linked from header.php after forms.css, i.e. last of the hard-coded
 *   sheets. accessibility.css scales the type inside these cards but sets
 *   no geometry on them, so there is nothing here for its layers to fight.
 *
 * DEPLOY
 *   header.php ships with this file. Purge the LiteSpeed cache.
 */

/* ==========================================================================
   1 - The panel scrolls only when it has to
   ========================================================================== */
.project-col:hover .project_description,
.project-col:focus-within .project_description{
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.35) transparent;
}

.project-col .project_description::-webkit-scrollbar{ width: 6px; }
.project-col .project_description::-webkit-scrollbar-track{ background: transparent; }
.project-col .project_description::-webkit-scrollbar-thumb{
	background: rgba(0, 0, 0, 0.35);
	border-radius: 3px;
}

/* ==========================================================================
   2 - Keyboard users get the same panel as mouse users
   --------------------------------------------------------------------------
   Same three declarations as `.project-col:hover .project_description` in
   commonstyle.css. Without this the anchor inside the closed panel is still
   in the tab order but invisible.
   ========================================================================== */
.project-col:focus-within .project_description{
	z-index: 2;
	height: 100%;
	opacity: 1;
}

/* ==========================================================================
   3 - The button is pinned, opaque, and carries the bottom padding
   --------------------------------------------------------------------------
   The three `padding-bottom` values below are the panel's own padding at
   each breakpoint - 30px in commonstyle.css, 20px and 55px in
   responsive.css. If any of those change, change these to match.
   ========================================================================== */
.project_description{
	padding-bottom: 0 !important;
	display: flex;
	flex-direction: column;
}

.project_description .link-go{
	position: sticky;
	bottom: 0;
	left: auto;  /* below 768px responsive.css pins it with position:absolute */
	right: auto; /* left:0 - sticky needs those offsets back to auto          */
	z-index: 1;
	margin-top: auto;
	flex: 0 0 auto;
	background-color: inherit; /* NOT var(--sitecolor): the green pages repaint the */
	                           /* panel with `.green .project_description{background: */
	                           /* #82a850}`, and a hard-coded gold button then sits on */
	                           /* a green panel as a mismatched block. `inherit` takes */
	                           /* whatever the panel itself resolved to, which also */
	                           /* keeps it correct inside the contrast modes. */
	padding-bottom: 30px;
}

@media (max-width: 767px){
	.project_description .link-go{ padding-bottom: 20px; }
}

@media (min-width: 1920px){
	.project_description .link-go{ padding-bottom: 55px; }
}

/*
 * If the ragged desktop button position is preferred over aligned buttons,
 * delete `margin-top: auto` above. Everything else still works: the button
 * simply sits where the text ends until the text is long enough to need
 * scrolling, at which point sticky takes over. Below 768px keep it - it is
 * what reproduces the current pinned-to-the-bottom layout there.
 */


/* NOTE - do NOT gate the panel behind `@media (hover: none)`.
   Opening the gold panel on TAP is intentional on mobile: it is how a phone
   user reads the address and description and reaches the "לדף הפרוייקט"
   button. A `(hover:none)` guard was tried here to stop the panel appearing
   over the title bar on touch, and it broke exactly that - the cards stopped
   opening on mobile. Reverted. If the panel ever needs constraining on
   touch, constrain its GEOMETRY; do not stop it opening. */


/* ==========================================================================
   4 - Prev / next project buttons keep a gap when they wrap
   --------------------------------------------------------------------------
   `.next-button` on the project detail pages is `display:block;
   text-align:center` holding two `display:inline-block` children,
   `.nav-previous` and `.nav-next`, with no vertical margin on either. While
   both fit on one line that is fine - the horizontal gap comes from the 8px
   right margin on the `.nav-next` anchor plus the whitespace between the
   inline blocks. The moment the type grows enough that they no longer fit
   side by side, they stack as two line boxes and there is nothing between
   them at all.

   Measured on a project page at 360px, resize step 200:
     before   prev 1139-1198, next 1198-1257  ->  0px gap, edge to edge
     after    prev 1139-1198, next 1210-1269  ->  12px gap

   A wrapping flex row with a `gap` handles both axes. The column gap is 5px
   rather than 12px so that, added to the anchor's own 8px margin, the
   side-by-side spacing stays at the 13px it is today - verified byte
   identical at 360px with no resize step applied.
   ========================================================================== */
.next-button{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 12px 5px;
}